From a065e04d529da1d847b5062a12c46d916408bf32 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 21:46:22 -0500 Subject: update based on https://github.com/mdn/yari/issues/2028 --- files/id/archive/add-ons/index.html | 11 - .../b2g_os/developing_firefox_os/index.html | 51 -- .../developing_firefox_os/porting/index.html | 123 --- files/id/archive/b2g_os/firefox_os_apps/index.html | 85 -- .../b2g_os/firefox_os_apps/pelokalan/index.html | 92 -- files/id/archive/b2g_os/index.html | 79 -- .../installing_on_a_mobile_device/index.html | 100 --- files/id/archive/b2g_os/introduction/index.html | 88 -- .../id/archive/b2g_os/phone_guide/flame/index.html | 73 -- .../flame/updating_your_flame/index.html | 411 --------- files/id/archive/b2g_os/phone_guide/index.html | 85 -- files/id/archive/b2g_os/platform/index.html | 82 -- .../quickstart/aplikasi_pertama_kamu/index.html | 210 ----- files/id/archive/b2g_os/quickstart/index.html | 49 -- files/id/archive/b2g_os/simulator/index.html | 120 --- .../b2g_os/using_the_app_manager/index.html | 233 ----- files/id/archive/css3/index.html | 972 --------------------- files/id/archive/index.html | 18 - files/id/archive/meta_docs/index.html | 11 - files/id/archive/mozilla/index.html | 8 - files/id/archive/mozilla/xul/index.html | 84 -- .../index.html | 23 - .../archive/mozilla/xul/school_tutorial/index.html | 59 -- .../xul/school_tutorial/perkenalan/index.html | 32 - .../the_essentials_of_an_extension/index.html | 344 -------- files/id/archive/mozilla/xulrunner/index.html | 84 -- files/id/archive/web/index.html | 15 - .../standards-compliant_authoring_tools/index.html | 25 - 28 files changed, 3567 deletions(-) delete mode 100644 files/id/archive/add-ons/index.html delete mode 100644 files/id/archive/b2g_os/developing_firefox_os/index.html delete mode 100644 files/id/archive/b2g_os/developing_firefox_os/porting/index.html delete mode 100644 files/id/archive/b2g_os/firefox_os_apps/index.html delete mode 100644 files/id/archive/b2g_os/firefox_os_apps/pelokalan/index.html delete mode 100644 files/id/archive/b2g_os/index.html delete mode 100644 files/id/archive/b2g_os/installing_on_a_mobile_device/index.html delete mode 100644 files/id/archive/b2g_os/introduction/index.html delete mode 100644 files/id/archive/b2g_os/phone_guide/flame/index.html delete mode 100644 files/id/archive/b2g_os/phone_guide/flame/updating_your_flame/index.html delete mode 100644 files/id/archive/b2g_os/phone_guide/index.html delete mode 100644 files/id/archive/b2g_os/platform/index.html delete mode 100644 files/id/archive/b2g_os/quickstart/aplikasi_pertama_kamu/index.html delete mode 100644 files/id/archive/b2g_os/quickstart/index.html delete mode 100644 files/id/archive/b2g_os/simulator/index.html delete mode 100644 files/id/archive/b2g_os/using_the_app_manager/index.html delete mode 100644 files/id/archive/css3/index.html delete mode 100644 files/id/archive/index.html delete mode 100644 files/id/archive/meta_docs/index.html delete mode 100644 files/id/archive/mozilla/index.html delete mode 100644 files/id/archive/mozilla/xul/index.html delete mode 100644 files/id/archive/mozilla/xul/international_characters_in_xul_javascript/index.html delete mode 100644 files/id/archive/mozilla/xul/school_tutorial/index.html delete mode 100644 files/id/archive/mozilla/xul/school_tutorial/perkenalan/index.html delete mode 100644 files/id/archive/mozilla/xul/school_tutorial/the_essentials_of_an_extension/index.html delete mode 100644 files/id/archive/mozilla/xulrunner/index.html delete mode 100644 files/id/archive/web/index.html delete mode 100644 files/id/archive/web/standards-compliant_authoring_tools/index.html (limited to 'files/id/archive') diff --git a/files/id/archive/add-ons/index.html b/files/id/archive/add-ons/index.html deleted file mode 100644 index acb2f057f2..0000000000 --- a/files/id/archive/add-ons/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Add-ons -slug: Archive/Add-ons -tags: - - NeedsTranslation - - TopicStub -translation_of: Archive/Add-ons ---- -

Archived add-ons documentation.

- -

Add-on SDK
Using the Add-on SDK, you can create Firefox add-ons. You can use various standard Web technologies: JavaScript, HTML, and CSS, to create the add-ons. The SDK includes JavaScript APIs, which you can use to create add-ons and tools for creating, running, testing, and packaging add-ons.
bookmarks.export()
Exports bookmarks to an HTML bookmark file.
bookmarks.import()
Imports bookmarks from an HTML bookmark file.
Bootstrapped extensions
browser.bookmarks.export( function() {...} // optional function )
Code snippets
Creating custom Firefox extensions with the Mozilla build system
There is a wealth of material on creating extensions for Firefox. All of these documents currently assume, however, that you are developing your extension using XUL and JavaScript only. For complex extensions, it may be necessary to create components in C++ that provide additional functionality. Reasons why you might want to include C++ components in your extension include:
Extension Etiquette
This article describes best practices when making extensions, including how to be kind to your users. It assumes that you are already familiar with Building an Extension.
Extension Packaging
By the end of 2017 WebExtensions will be the only supported add-on type in Firefox. To learn how to install a WebExtension for testing purposes, see Temporary Installation in Firefox. To learn how to package a WebExtension for distribution, see Publishing your WebExtension.
Extensions support in SeaMonkey 2
Starting with SeaMonkey 2 Alpha 1 SeaMonkey supports toolkit/-style extensions. These type of extensions have many advantages for both users and developers compared to the old xpinstall/-style extensions.
Firefox addons developer guide
The original document is in Japanese and distributed via the xuldev.org website. So there may be still some reference to the xuldev website (we want to host source code on MDC, not on xuldev), and to Japanese things (like some specific locales, which have been translated to French since non-latin characters are not well supported).
Hotfix Extension
This document has been moved to the Add-ons wiki.
How to convert an overlay extension to restartless
First off, what kind of add-on are we talking about here? Well, XUL overlays and windows, JSM files, chrome & resource mappings with localization, default preferences, but no XPCOM components of your own. Some of that will have to be replaced and the rest will need to be loaded differently.
Inline options
Firefox 7 supports a new syntax for defining extensions' preferences for both bootstrapped and traditional extensions. The user interface for the preferences defined with this new syntax appears in the extension's detail view in the Add-on Manager. This functionality originally appeared in Firefox mobile and is now available in Firefox on the desktop as well.
Install Manifests
An Install Manifest is the file an Add-on Manager-enabled XUL application (e.g. Firefox or Thunderbird) uses to determine information about an add-on as it is being installed. It contains metadata identifying the add-on, providing information about who created it, where more information can be found about it, which versions of what applications it is compatible with, how it should be updated, and so on.
Interaction between privileged and non-privileged pages
An easy way to send data from a web page to an extension is by using custom DOM events. In your extension's browser.xul overlay, write code which listens for a custom DOM event. Here we call the event MyExtensionEvent.
Legacy Add-ons
This section contains links to documentation for legacy technology for add-on development, including:
Legacy extensions for Firefox for Android
Add-ons that work with desktop Firefox do not automatically work in Firefox for Android:
Overlay extensions
This page contains links to documentation for the approach to developing extensions for Gecko-based applications which uses:
Performance best practices in extensions
One of Firefox's great advantages is its extreme extensibility. Extensions can do almost anything. There is a down side to this: poorly written extensions can have a severe impact on the browsing experience, including on the overall performance of Firefox itself. This article offers some best practices and suggestions that can not only improve the performance and speed of your extension, but also of Firefox itself.
Security best practices in extensions
This document is intended as a guide for developers to promote best practices in securing your extension. Your goal is to keep your users safe. Some items mentioned are strict guidelines, meaning that if you don't follow them then your add-on will not be approved on Mozilla add-ons. Other items are recommendations. The difference will be clearly flagged.
Setting up an extension development environment
This article provides suggestions for how to set up your Mozilla application for extension development. These details apply to Firefox, Thunderbird, and SeaMonkey (version 2.0 and above).
Tabbed browser
Here you should find a set of useful code snippets to help you work with Firefox's tabbed browser. The comments normally mark where you should be inserting your own code.
Techniques
.
Working with multiprocess Firefox
In older versions of Firefox, chrome code (including code inserted by extensions) and content run in the same operating system process. So extensions can access content directly:

diff --git a/files/id/archive/b2g_os/developing_firefox_os/index.html b/files/id/archive/b2g_os/developing_firefox_os/index.html deleted file mode 100644 index d36360d6fa..0000000000 --- a/files/id/archive/b2g_os/developing_firefox_os/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Developing Firefox OS -slug: Archive/B2G_OS/Developing_Firefox_OS -tags: - - B2G - - Developing - - Firefox OS - - NeedsTranslation - - TopicStub -translation_of: Archive/B2G_OS/Developing_Firefox_OS ---- -
-

Bagian ini memberikan dokumentasi yang berguna yang mencakup berbagai cara di mana OS Firefox (codename Boot2Gecko, atau B2G) dapat dimodifikasi / disesuaikan selama proses pembuatan, dan bagaimana Anda dapat membantu mengembangkan area platform tingkat rendah seperti Gecko dan Gonk.

-
- -
-

Catatan: Jika Anda secara khusus tertarik untuk membantu mengembangkan Gaia, antarmuka pengguna Firefox OS, Anda harus berkonsultasi dengan halaman Mengembangkan Gaia kami.

-
- -

Catatan Kontribusi Umum

- -

Karena Gecko adalah bagian integral dari browser Firefox, berkontribusi pada komponen yang terkait dengan Firefox Gecko adalah proses yang mirip dengan Gecko pada umumnya; Menyumbang Gonk juga lumayan mirip. Pada dasarnya, Anda perlu mengenal komunitas, pelajari bagaimana basis kode bekerja, dan temukan bug untuk dikerjakan. Tempat yang baik untuk mulai mendapatkan penghasilan tentang proses kontribusi Kontribusi pada basis kode Mozilla.

- -

Anda harus belajar tentang Gecko — cara kerjanya dan bagaimana strukturnya. Halaman awal MDN Gecko memiliki beberapa catatan yang berguna pada ini, seperti halnya Gecko: halaman Tinjauan pada Mozilla Wiki. Untuk informasi tentang API (Spesifik Mozilla OS), lihat halaman Wiki WebAPI untuk ringkasan pekerjaan, dan halaman MDN WebAPI untuk indeks semua API yang terdokumentasi.

- -

Next, look at Gonk, the kernel that Firefox OS runs on top of. Gonk is basically another porting target for Gecko, just like Mac OS X, Windows and Linux are in the case of Desktop Firefox versions. Gonk itself is really just a stripped down version of the Android Open Source Project — we tend not to change much of Gonk itself since most of the source code isn't under our control, and the device partners we work with to create Firefox OS devices usually provide device-specific code to interface between the device and Gecko/Gonk.

- -

There is still work to be done on APIs, however. Most Gonk-specific Gecko code either uses #ifdef MOZ_WIDGET_GONK to only enable it in Firefox OS, and/or are contained in gonk subdirectories, such as gecko-dev/hal/gonk. Try cloning the gecko-dev repo locally and having a look around. Our Mozilla Source Code Directory Structure article is also useful.

- -

Next, you should learn more about Firefox OS architecture, how to Build Firefox OS (start with the Firefox OS build process summary), and how to Port Firefox OS to other devices.

- -

Firefox OS is developed as a series of separate Modules: review the Firefox OS Modules page to get an idea of how the codebase is grouped, and learn who the main module owners are so you can get an idea of who to talk to if you need help.

- -
-

Note: To find help, the best places to start are the dev-b2g mailing list, and the #b2g chatroom on Mozilla IRC.

-
- -

Specific Firefox OS development topics

- -
-
Filing bugs against Firefox OS
-
This article provides a guide to filing bugs against any aspect of Firefox OS.
-
Modifying the hosts file
-
A guide to what can be achieved by modifying the Firefox OS hosts file.
-
Customization with the .userconfig file
-
How to customize the build and execution of Firefox OS by changing the .userconfig file.
-
Customizing the b2g.sh script
-
An explanation of what can be achieved by customizing the b2g.sh script, which runs the b2g application and controls many aspects of the system.
-
Customizing DNS
-
This article outlines a procedure to change the DNS servers for all interfaces (wifi, cellular, etc.) on a Firefox OS device.
-
diff --git a/files/id/archive/b2g_os/developing_firefox_os/porting/index.html b/files/id/archive/b2g_os/developing_firefox_os/porting/index.html deleted file mode 100644 index 33d147813a..0000000000 --- a/files/id/archive/b2g_os/developing_firefox_os/porting/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Porting Firefox OS -slug: Archive/B2G_OS/Developing_Firefox_OS/Porting -translation_of: Archive/B2G_OS/Porting_B2G_OS/basics ---- -
-

Firefox OS (formerly Boot to Gecko) uses a kernel derived from Android, with a Gecko-based user interface on top of it. This article provides a basic guide to how to go about porting the operating system to new devices.

-
-

This guide assumes you're porting to a new device that already runs Android; if you're porting to another device, the job is going to be more involved.

-

Set up your build system

-

The first step is to configure your build system; you can follow the guide in Firefox OS build prerequisites.

-

Create a local backup of the original Android system

-

Next, you should back up your Android device before you start nuking it with your test builds of B2G. In addition, some of these bits will be needed by the build and install process.

-
mkdir my_device_backup
-cd my_device_backup
-adb pull /system system
-

Clone the B2G repositories

-

The first step is to clone the B2G repository as well as the repository with the manifests.

-
git clone https://github.com/mozilla-b2g/B2G.git
-git clone https://github.com/mozilla-b2g/b2g-manifest.git
-

Add a new device to config.sh

-

The next step is to add a new device to config.sh in the B2G repository;  you can use the existing ones as a template. This basically involves providing the instructions for fetching the correct files to do the build.

-

Create a manifest for the new device

-

Now you need to add a manifest file for the new device. Refer to one of the existing manifests for a template. You can use the hamachi manifest a reference. Once done, you should add and commit your new manifest to your local b2g-manifest repository:

-
git add my-new-device.xml
-git commit
-
-

Next, you will want the config.sh file to use your local b2g-manifest repository instead of the official one. To achieve this, change the values of the GITREPO and BRANCH variables in the config.sh file to the location of your local repository and desired branch, for example:

-
GITREPO=${GITREPO:-"file:///home/yourname/b2g-manifest"}
-BRANCH=${BRANCH:-master}
-

Create a configuration tree for the new device

-

Create a new configuration tree for the new device. This should be at device/<manufacturer>/<device_id>. This tree should include, at least:

- -

The content here may differ a great deal from one device to another. In particular, BoardConfig.mk and extract-files.sh may differ significantly. This part requires a lot of hacking, testing, and debugging to figure out which binary blobs should be extracted. To get a better idea what is supposed to be contained there, take a look at the configuration for the hamachi device. Remember to correctly reference your own configuration tree from the manifest you created for your new device.

-
-

Note: If you can find an existing reference on CyanogenMod for your device, this information will speed up the porting process. the XDA Forum is another good place to discuss and check for resources.

-
-

Rebuild boot.img

-

Once you have all that done, you need to rebuild the boot image. This isn't usually needed for the kernel itself, but to pick up the changes to init.rc.

-

Changes to init.rc

-

The init.rc you use is not the one provided by B2G; instead, you need to pull it from the device.

-

The main things you'll need to modify are:

-

Import init.b2g.rc

-

Add the following lines to import init.b2g.rc:

-
on early-init
-    start ueventd
-    import /init.b2g.rc
-

Fix permissions

-

Correct the permissions on the files /system/b2g/b2g, /system/b2g/updater, /system/b2g/plugin-container; this should be done after the lines that mount the filesystem read/write:

-
chmod 0755 /system/b2g/b2g
-chmod 0755 /system/b2g/updater
-chmod 0755 /system/b2g/plugin-container
-

You might want to start by modifying the init.rc from the new device instead of using the init.rc provided by the build system; if so, you need to remember to set TARGET_PROVIDES_INIT_RC in BoardConfig.mk.

-

Prebuilt kernel vs. building the kernel from source

-

You can use a prebuilt kernel, or you may build the kernel from source. To build the kernel from source, add AndroidKernel.mk and the kernel config to the device configuration tree.

-

The maguro on the old build system is an example that builds the kernel from source.

-

Extracting and modifying an existing boot image

-

It is possible to recover the boot image of a phone by dumping the contents of the /dev/mtd/mtd1 or /dev/mtd/mtd2 devices, the resulting image file can then be easily recovered:

-
adb shell 'cat /dev/mtd/mtd1 > /sdcard/boot.img'
-adb pull /sdcard/boot.img
-
-

Once the boot image file has been obtained it can be unpacked via a helper tool such as unmkbootimg. The tool will extract both the kernel image (zImage) and the ramdisk (initramfs.cpio.gz) as well as printing out a command to rebuild the image with the same parameters of the original one, for example:

-
$ unmkbootimg boot.img
-Kernel size 3872576
-Kernel address 0x208000
-Ramdisk size 265102
-Ramdisk address 0x1500000
-Secondary size 0
-Secondary address 0x1100000
-Kernel tags address 0x200100
-Flash page size 2048
-Board name is ""
-Command line "androidboot.hardware=aphone"
-Extracting kernel to file zImage ...
-Extracting root filesystem to file initramfs.cpio.gz ...
-All done.
----------------
-To recompile this image, use:
-  mkbootimg --kernel zImage --ramdisk initramfs.cpio.gz --base 0x200000 --cmdline 'androidboot.hardware=aphone' -o new_boot.img
----------------
-
-

To modify the ramdisk file create an output directory and extract it there:

-
mkdir initramfs_dir
-cd initramfs_dir
-gunzip -c ../initramfs.cpio.gz | cpio -i
-
-

Make all the required changes (such as modifying init.rc) and repack the ramdisk using mkbootfs, be sure to use the version that has been built with the B2G host tools:

-
/path/to/your/B2G/out/host/linux-x86/bin/mkbootfs . | gzip > ../newinitramfs.cpio.gz
-
-

Finally go back to the top-level directory and re-pack the boot image using the mkbootimg, also make sure you're using the version built with the other B2G host tools:

-
/path/to/your/B2G/out/host/linux-x86/bin/mkbootimg --kernel zImage --ramdisk newinitramfs.cpio.gz --base 0x200000 --cmdline 'androidboot.hardware=aphone' -o newboot.img
-
-

If you now copy the new boot image under out/target/product/$DEVICE/boot.img (where $DEVICE is your device name) it will be automatically flashed when invoking flash.sh. Alternatively you can flash it by hand with the following commands:

-
adb reboot bootloader
-fastboot flash boot newboot.img
-fastboot reboot
-
-

Add the new device to flash.sh

-

Add the new device to flash.sh; the specifics of how to do this will depend on what tools need to be used to flash the new device.

-

Configure, build, and flash the new device

-

Now you can try building for and flashing to your new device:

-
ANDROIDFS_DIR=my_device_backup ./config.sh <device_id> '../b2g-manifest/default.xml'
-./build.sh
-./flash.sh
-

Test and debug

-

We need some details added here; indeed, this entire article could use some help.

-

FAQ

-

Forthcoming

-

See also

- diff --git a/files/id/archive/b2g_os/firefox_os_apps/index.html b/files/id/archive/b2g_os/firefox_os_apps/index.html deleted file mode 100644 index 370236dd14..0000000000 --- a/files/id/archive/b2g_os/firefox_os_apps/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Firefox OS apps -slug: Archive/B2G_OS/Firefox_OS_apps -tags: - - Apps - - Building - - Components - - Firefox OS - - Installing - - NeedsTranslation - - TopicStub - - device APIs -translation_of: Archive/B2G_OS/Firefox_OS_apps ---- -

This section of the Firefox OS docs covers the specific techniques required — and available tools — for building Firefox OS apps. You'll find a number of details below, from Firefox OS building blocks/web components, to device APIs and App installation.

- -

Building Firefox OS apps

- -
-
Building apps for Firefox OS
-
Firefox OS/Firefox platform app specifics, including App installation and management APIs, manifest files, packaged and hosted apps, handling API permissions.
-
Localization
-
This set of articles provides information for developers wishing to provide localized versions of their apps.
-
Performance
-
This page lists performance-related topics specific to Firefox OS.
-
Firefox Accounts on Firefox OS
-
This article provides an overview of using Firefox Accounts in Firefox OS.
-
Reference apps
-
This page lists a number of sample apps we've put together for you to download, install, play with and learn from. Have fun!
-
Screencast series: App Basics for Firefox OS
-
In this collection of short videos, developers from Mozilla and Telenor explain in a few steps how you can get started with building applications for Firefox OS.
-
- -

Building blocks

- -
-
Building Blocks
-
The Firefox OS Building Blocks are reusable UI components (also called 'common controls') that reflect OS-wide design patterns. Building Blocks are used to create the interfaces of all Gaia default apps. You are free to make use of these components in your own Firefox OS apps, or general Web apps.
-
- -

Styleguides

- -
-
Firefox OS Visual styleguide
-
Our style guide for Firefox OS visual design, covering colours, typeface, backgrounds, app icons, and the design of specific UI elements.
-
Firefox OS Copy styleguide
-
This guide outlines the rules we follow for writing Firefox OS app copy, but can be used as a general guide to writing good copy for any app interfaces.
-
Firefox OS in Arabic
-
A guide to the specific UX design implementation Firefox OS has in place for dealing with Arabic (and other RTL languages.)
-
- -

Assets

- -
-
Firefox OS design asset library
-
In this section you'll find design assets, artwork, graphic templates, fonts and other materials that will be helpful as you design Firefox OS/Gaia apps.
-
Firefox OS icon font
-
Firefox OS has its own icon font set available: this article explains how to use it in your own apps.
-
Firefox OS transitions
-
A reference to some of the transitions used in Firefox OS to move between different states in apps, including animated GIFs demonstrating the animations used, plus code samples to show the CSS animation code needed to implement these animations.
-
- -

References

- -
-
Firefox OS device APIs
-
This article provides a list of pages covering those APIs, as well as the app manifest permissions for each one.
-
Firefox OS app tools
-
This page provides a list of useful tools, libraries, examples, etc. that are useful for Firefox OS app developers, whether you want a code template to copy, or need help with adding a specific feature to your Firefox OS app.
-
- -

Other app topics

- -
-
Porting Chrome apps to Firefox OS Apps
-
This article discusses the differences between Chrome apps and Firefox OS Apps, and how you can convert between the two.
-
App development FAQ
-
This FAQ is a compilation of answers to common app development questions.
-
- -

See also

- - diff --git a/files/id/archive/b2g_os/firefox_os_apps/pelokalan/index.html b/files/id/archive/b2g_os/firefox_os_apps/pelokalan/index.html deleted file mode 100644 index acb5aeb487..0000000000 --- a/files/id/archive/b2g_os/firefox_os_apps/pelokalan/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Pelokalan aplikasi -slug: Archive/B2G_OS/Firefox_OS_apps/Pelokalan -translation_of: Archive/B2G_OS/Firefox_OS_apps/Localization ---- -

- -
-

This set of articles provides information for developers wishing to provide localized versions of their apps.

-
- -

Tutorials

- -
-
Getting started with app localization
-
This tutorial provides a detailed guide to app localization.
-
Connecting developers and translators with Transifex
-
This article explores the use of Transifex for managing translation work, both for app developers and localizers.
-
- -

Reference

- -
-
L10n.js reference
-
This article provides a reference for the l10n.js library, and its associated date helper, l10n_date.js.
-
Internationalization helpers: IntlHelper and mozIntl
-
This article looks at how Firefox OS handles localization of dates, times, numbers and collators from version 2.5 onwards, using the Internationalization API and Gaia's built in helpers, IntlHelper and mozIntl.
-
App localization code best practices
-
Localization best practices and advanced techniques for experienced Gaia/app developers.
-
Developing Bidi Apps
-
Best coding practices and guidelines for developing bi-directional (left-to-right and right-to-left, RTL) apps.
-
- -

Tools

- -
-
Translation tester
-
This app is for testing translations for Firefox OS apps and provides a blueprint for adding translation support to your own apps.
-
diff --git a/files/id/archive/b2g_os/index.html b/files/id/archive/b2g_os/index.html deleted file mode 100644 index 5d4a5149dc..0000000000 --- a/files/id/archive/b2g_os/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Firefox OS -slug: Archive/B2G_OS -tags: - - Boot to Gecko - - Firefox OS - - Gaia -translation_of: Archive/B2G_OS ---- -

Firefox OS (kadang-kadang disingkat FxOS) adalah sistem operasi mobile baru yang dikembangkan oleh Mozilla. menggunakan kernel Linux dan mesin berbasis Gecko, yang memungkinkan pengguna menjalankan aplikasi yang dikembangkan seluruhnya menggunakan HTML, JavaScript, dan open web application APIs lainnya.

- -

Firefox OS saat ini dalam pengembangan besar; kami terus bekerja untuk membuatnya lebih mudah digunakan dan hack pada Gaia (aplikasi standar) dan membuat sendiri. Namun, Anda perlu pengetahuan tentang sistem untuk melakukan hal-hal seperti membangun Firefox OS stack, atau memasang Firefox OS kedalam handphne Anda. Link dibawah ini adalah panduan untuk pengembang web yang tertarik menjalankan dan membuat peribahan untuk Gaia atau mengembangkan aplikasi untuk berjalan di perangkat Firefox OS.

- - - - - - - - -
-

Dokumentasi tentang Firefox OS

- -
-
Pengantar Firefox OS
-
Informasi pengantar tentang apa itu Firefox OS dan bagaimana cara kerjanya.
-
Tips dan trik Firefox OS
-
Beberapa artikel pendek tentang tips dan trik yang berguna untuk mengetahui Firefox OS disaat melakukan hacking.
-
Menulis aplikasi untuk Firefox OS
-
Dokumentasi tentang membuat aplikasi Firefox OS.
-
Pusat pengembang
-
Kumpulan peralatan, tutorial, dan layanan untuk pengembang aplikasi Firefox OS.
-
UX (Pengalaman pengguna)
-
Panduan untuk Gaya user experience desain, maupun pola kode dan template untuk membantu Anda membuat aplikasi Firefox OS yang menarik dan konsisten.
-
Platform Firefox OS
-
Dokumentasi tentang platform Firefox OS, termasuk Gonk, Gaia, dan lainnya. Ini termasuk dokumentasi untuk membangun dan memasang platform ke perangkat, serta membangun simulator dan emulator.
-
Keamanan
-
Dokumentasi tentang keamnan  di Firefox OS; ini termasuk topik tentang keamanan perangkat dari setiap perspektif: untuk pengembang aplikasi, perangkat integrator, dan sebagainya.
-
Performa
-
Artikel tentang mengoptimalisasi aplikasi Firefox OS.
-
Pemecahan Masalah
-
Panduan untuk mengatasi masalah umum pada Firefox OS.
-
Debugging pada Firefox OS
-
Panduan untuk debugging aplikasi mobile dan Firefox OS itu sendiri.
-
Panduan untuk  Firefox OS developer phone
-
Panduan untuk Firefox OS developer phones, Mozilla memberikan telepon ke beberapa pengembang. Panduan ini juga berlaku jika sesorang memasang Firefox OS ke teleponnya
-
- -

Lihat Semua...

- 		-

Dapatkan bantuan dari komunitas

- -

Jika Anda bekerja dengan Firefox OS, atau mengembangkan aplikasi yang ingin dijalankan di perangkat Firefox OS, ada komunitas yang akan membantu Anda!

- -
    -
  • Ajukan pertanyaan Anda ke Mozilla Boot to Gecko IRC channel: #b2g
    • -
- -

Jangan lupa tentang netiquette...

- - - - - - -

Sumber Lain

- - -
diff --git a/files/id/archive/b2g_os/installing_on_a_mobile_device/index.html b/files/id/archive/b2g_os/installing_on_a_mobile_device/index.html deleted file mode 100644 index 9ee7eb6251..0000000000 --- a/files/id/archive/b2g_os/installing_on_a_mobile_device/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Installing Firefox OS on a mobile device -slug: Archive/B2G_OS/Installing_on_a_mobile_device -translation_of: Archive/B2G_OS/Installing_on_a_mobile_device ---- -
-

Once you've built Boot to Gecko for a supported mobile device, you can install it. This article will guide you through the process.

-
-
- Note: The first time you flash your phone, it must have Android 4 (Ice Cream Sandwich) installed. The process will not work correctly otherwise. Once you've done your first install of B2G, however, you can simply update on top of it.
-

Installing ADB

-

On OSX

-

If you have homebrew on OSX:

-
brew install android-platform-tools
-

Otherwise, download the Android Developer Tools and add the binaries to your PATH.

-

On Ubuntu

-
sudo apt-get install android-tools-adb
-

Flashing your phone

-

To flash everything to your phone, simply connect your phone and type:

-
./flash.sh
-
-

That's it. The B2G you've currently got built will flash onto your device.

-

Note that If you are updating across revisions with significant Gaia changes, you might need also do:

-
cd gaia
-make reset-gaia
-

This will wipe all of your data stored in Gaia, but also clear out obsolete Gaia settings and prefs so that you'll boot into a "clean" Gaia. In theory ./flash.sh should do this already, but for some devices (e.g. hamachi) ./flash.sh only flashes a subset of modules (./flash.sh -f will force flash everything.)

-

Configuring the udev rule for your device

-

On Linux, if you get this,

-
< waiting for device >
-

that probably means that you haven't added a udev rule for the fastboot device, which is not the same as the one for adb. (Though it also might just mean you need to run ./flash.sh with sudo) You can get the USB vendor ID by running lsusb now, but typically it's Google's: 18d1, so adding this line in your /etc/udev/rules.d/51-android.rules would work:

-
SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", MODE="0666", GROUP="plugdev"
-
- Note: If you get a very helpful libusb error "-3" on Linux, it means you need to be root to have the needed access to the USB device. Run the script again using sudo.
-
- Note 2: If you have an Unagi or a Geeksphone Keon phone, you need two lines like this - one for the original phone vendor's ID, and one for Google's.
-

Special notes for Hamachi, Helix, and Leo devices

-

If your phone is a hamachi, helix or leo device, the ./flash.sh script will now default to flashing only gecko and gaia.  It is recommended that you flash with the OEM as a base build to get the firmware and the gonk layers and then flash the gecko and gaia on top.  If you want to flash using the images, there is an override flash where you can ./flash.sh -f and it will use the image files to flash your device.

-

Special notes for the Samsung Galaxy S2

-

If your phone is a Galaxy S2 and you are using heimdall 1.3.2 (the latest version; use heimdall version to check), you may see an alarming error "FACTORYFS upload failed!" followed by "Heimdall flashing failed" and some additional information. This is actually a success condition, and you can ignore the advice.

-

To get rid of this strange behavior, grab a source copy of heimdall, downgrading to the 1.3.1 release ("git checkout fbbed42c1e5719cc7a4dceeba098981f19f37c06"), then compile it  according to the README, then install that to make the error go away. However, this isn't strictly necessary.

-
-

Note: the image size may not a problem. see the next tip

-
-

All versions of heimdall are unable to flash a system.img larger than 100MB. Do:

-
ls -l ./out/target/product/galaxys2/system.img
-
-

to see how big yours is. If it's too large, ask in IRC for advice; there are ways to do it in two stages.

-

The argument of heimdall command may not work and result in fail when trying to flash. You'll need to change it in the ./flash.sh script, the argument must be in uppercase (l.185) :

-
case $project in
-        "system")
-                $HEIMDALL flash --FACTORYFS out/target/product/$DEVICE/$project.img
-                ;;
-
-        "kernel")
-                $HEIMDALL flash --KERNEL device/samsung/$DEVICE/kernel
-                ;;
-
-        "")
-                $HEIMDALL flash --FACTORYFS out/target/product/$DEVICE/system.img --KERNEL device/samsung/$DEVICE/kernel &&
-                update_time
-                ;;
-        esac
-

 

-

Added step for the Samsung Galaxy S2

-

If you're flashing onto the Galaxy S2, there is an additional step to follow. Gaia does not get flashed automatically by the flash.sh script; you'll need to also do:

-
./flash.sh gaia
-
-

Flashing specific partitions to fastboot phones

-

You can flash specific partitions to fastboot phones (that is, any phone other than the Samsung Galaxy S2). For example:

-
./flash.sh system
-./flash.sh boot
-./flash.sh user
-
-

WARNING: flashing user (at least) may delete your user-specific data (contacts, etc.).

-

Updating specific modules

-

You can update specific components of B2G by specifying their names when flashing. For example:

-
./flash.sh gaia
-./flash.sh gecko
-
-

In order to update only one application you can use BUILD_APP_NAME environment variable:

-
BUILD_APP_NAME=calendar ./flash.sh gaia
-

If your phone is not for developer (you aren't interested on test apps and/or require optimization), you can update gaia using:

-
VARIANT=user ./flash.sh gaia
-

Next steps

-

At this point, your phone should be running Boot to Gecko! It's time to experiment, write some code, test, or do some debugging!

-
- Note: A helpful usage tip: if your build of B2G starts up with the lock screen requesting a pass code to unlock the phone, the default code is 0000.
-

Troubleshooting

-

Here are a some tips for what to do if your device doesn't work right after installing B2G, or updating it to a new version

-

If the UI doesn't start up

-

If you update your phone and the user interface doesn't start up, you can reset it to clear out out-of-date configuration and the like. This may bring it back to life, but note that it may also delete your user-specific data (contacts, etc.). Here's how:

-
cd gaia
-make reset-gaia
-
-

If you want change from developer to production mode

-
cd gaia
-make reset-gaia PRODUCTION=1
-

WARNING: reset-gaia may delete your user-specific data (contacts, etc.).

-

"image is too large" error message on ./flash.sh execution

-

It might mean that you phone needs to be rooted first before flashing it. As b2g needs to be written on root partition, your phone needs to be rooted in order to install it.

diff --git a/files/id/archive/b2g_os/introduction/index.html b/files/id/archive/b2g_os/introduction/index.html deleted file mode 100644 index 1c113d8712..0000000000 --- a/files/id/archive/b2g_os/introduction/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Pengantar Firefox OS -slug: Archive/B2G_OS/Introduction -tags: - - B2G - - Firefox OS -translation_of: Archive/B2G_OS/Introduction ---- -

Firefox OS (juga disebut dengan codename "Boot to Gecko" atau "B2G") adalah sistem operasi open source Mozilla berbasis Linux dan teknologi Mozilla Gecko. Firefox OS adalah sistem operasi mobile yang bebas dari teknologi ekslusif saat ini menjadi platform yang kuat yang memberikan pengembang aplikasi kesempatan untuk menciptakan produk unggulan Selain itu, Firefox OS fleksibel dan cukup mampu membuat pengguna bahagia.

-

Untuk pengembang Web bagian yang paling penting untuk dipahami adalah bahwa seluruh antarmuka pengguna adalah aplikasi web, yang mampu menampilkan dan meluncurkan aplikasi Web lainnya. Modifikasi yang Anda buat ke antarmuka pengguna dan aplikasi yang Anda buat untuk berjalan di Firefox OS adalah halaman Web, meskipun dengan meningkatkan akses ke perangkat kerasa dan layanan mobile.

-

Anda dapat belajar bagaimana membangun dan memasang Firefox OS dengan mengikuti panduan praktis kami.

-

Persyaratan perangkat keras

-

Perangakat mobile berbasis ARM terbaru cukup kuat untuk mendukung proting Firefox OS. Bagian ini mencakup persyaratan perangkat  keras dasar serta fitur perangkat keras yang direkomendasikan.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KomponenMinimumRekomendasi
CPUARMv6Cortex A5 class atau lebih
- ARMv7a dengan NEON
GPU—Adreno 200 class atau lebih
Connectivity—WiFi
- 3G
Sensors—Accelerometer
- Proximity
- Ambient light
- A-GPS
-

Untuk pengalaman pengguna yang baik, itu ide yang baik untuk memilih perangakat yang menawarkan profil warna seragam (Implementasi dengan graphics device driver) dan dukungan headphone untuk mematikan dan menyalakan dan untuk menghentikan dan memutar media. Fitur ini umumnya ada di kalangan smartphone modern.

-

Tips penggunaan

-

Bagian ini  memberikan beberapa tips yang akan membantu Anda menggunakan Firefox OS. Ini adalah penampung sampai kita memiliki dokumentasi penggunaan nyata.

-

Membuka Kunci telepone

-

Jika Anda membangun Firefox OS, pada saat dijalankan meminta kode pass untuk membuka kunci perangkat Anda, kode standar adalah 0000. Beberapa Firefox OS akan melakukan ini seraya kami mengembangkan dan menguki layar kunci.

-

Menangkap screenshot

-

Menangkap screenshot simpel dengan menekan tombol power dan home secara bersamaan. Gambar screenshot akan berada di /sdcard/screenshots pada perangkat Anda; Anda dapat mengaksesnya menggunakan aplikasi Galeri pada telepon Anda, juga.

-

Jika karena alasan tertentu tidak dapat bekerja, Anda juga dpaat melakukannya dari terminal Linux atau Mac OS X komputer yang memiliki sistem Firefox OS.

-
    -
  1. Pastikan Anda telah memasang aplikasi ffmpeg. -
      -
    1. Pada Mac, Jika Anda menggunakan, Anda dapat melakukan ini dengan sudo port install ffmpeg. untuk homebrew, jalankan brew install ffmpeg.
      2. -
    2. Pada Linux (Ubuntu/Debian), gunakan sudo apt-get install ffmpeg.
      3. -
    -
    2. -
  2. Sambungkan telepon ke komputer menggunakan kabel USB.
    3. -
  3. Arahkan telepon Anda kedalam situasi apapun yang ingin Anda screenshot.
    4. -
  4. cd ke direktori B2G/gaia
    5. -
  5. make screenshot
    6. -
  6. Anda sekarang memiliki screenshot bernama screenshot.png.
    7. -
-

Remote debugging dengan ADB

-

Untuk mengaktifkan USB Debugging via adb, buka aplikasi Pengaturan dan arahkan ke Informasi Pernagkat > Informasi Lebih Lanjut > Pengembang. Dari daftar, berikan tanda centang pada Remote Debugging. Terakhir, hubungkan perankat via USB dengan komputer Anda.

-

Tombol dan kontrol

-

sebuah perangkat Firefox OS memiliki sejumlah tombol fisik:

-
-
- Tombol Home
-
- Tombol ini umumnya berpusat dibawah layar. Menekannya akan mengembalikan Anda ke peluncur aplikasi. Menekannya secara lama membuka tampilan card switching; gesekan ke atas pada tampilan tersebut akan hilang.
-
- Volume rocker kontrol
-
- Pada sisi kiri adalah volume rocker; Menekan bagian atas dari rocker akan meningkatkan volume dan menekan bagian bawah akan menurunkan volume.
-
- Tombol Power
-
- Tombol power berada di pojok kanan atas perangkat.
-
diff --git a/files/id/archive/b2g_os/phone_guide/flame/index.html b/files/id/archive/b2g_os/phone_guide/flame/index.html deleted file mode 100644 index 697980244f..0000000000 --- a/files/id/archive/b2g_os/phone_guide/flame/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Flame -slug: Archive/B2G_OS/Phone_guide/Flame -tags: - - B2G - - Firefox OS - - Flame - - NeedsTranslation - - TopicStub - - developer phone - - official reference device -translation_of: Archive/B2G_OS/Phone_guide/Flame ---- -

A picture of the Flame device, showing the Firefox OS homescreen containing several app icons.

- -

The Flame device is the official reference device for developing, testing, and debugging Firefox OS and open web apps. This guide provides basic information about its hardware specifications as well as practical documentation specific to experimenting with, developing for, and testing of software compatible with this phone.

- -

The Flame hardware offers a representative set of specs — including FWVGA display and dual-core processor — to help developers build great content and experiences. A stable hardware platform is also good for testers, making it easier to test and address specific software issues without having to worry about device model-specific bugs, etc.

- -

If you have your phone in hand and want to start playing with it, developing and distributing apps, or contributing to the Firefox platform, the following links will also get you where you need to go:

- - - -

If you’d like to find out more about updating the operating system, recovering it, pushing apps to it, or phone specs, you’ll find the information you need at the following two articles :

- - - -

Get a device

- -

Flame sales have come to an end. There are still opportunities left for Mozilla contributors to get free Flames, including the upcoming Foxtrot program. If you have questions about getting a device for development or testing, please reach out to Asa Dotzler on the #fxos channel on IRC.

- -

Device specifications

- -

You can find more of the device specifications listed on our Phone and device specs page.

- -

Network

- - - -

Hardware

- - - -

See also

- - diff --git a/files/id/archive/b2g_os/phone_guide/flame/updating_your_flame/index.html b/files/id/archive/b2g_os/phone_guide/flame/updating_your_flame/index.html deleted file mode 100644 index f3ca1ae59c..0000000000 --- a/files/id/archive/b2g_os/phone_guide/flame/updating_your_flame/index.html +++ /dev/null @@ -1,411 +0,0 @@ ---- -title: Updating your Flame -slug: Archive/B2G_OS/Phone_guide/Flame/Updating_your_Flame -translation_of: Archive/B2G_OS/Phone_guide/Flame/Updating_your_Flame ---- -
-

This article covers how to update the software on your Flame — including updating Firefox OS and pushing new apps to your phone — along with backing up your data, and other useful troubleshooting and testing information. Before starting to do any of this, you should make sure you have run through the Initial setup information.

-
- -

Quick guide to updating your device

- -

There is a lot of information in this article, so here we've included a quick start guide that takes you through the steps you need quickly to get your device updated. You can refer to the below sections for more detail if it is needed.

- -

Full flash to the latest base image

- -

This set of steps needs to be done before you do anything else to your phone (see {{anch("Base image")}} and {{anch("Base image installation")}} if you require more details.)

- -
Prerequisites: Make sure you have adb and fastboot installed and available in your system's PATH (see Installing ADB and Fastboot.)
- 
- -
    -
  1. Download the latest base image —Base image v18D_nightly_v4 — to your computer.
    2. -
  2. On your Flame device, enable remote debugging by navigating to Settings > Developer and enabling the Debugging via USB option.
    3. -
  3. Connect your Flame to your computer via a USB cable.
    4. -
  4. Verify that the computer is connected to the device by typing this command: - 
    adb devices  
-
    - You should see something like the following: - - 
    List of devices attached
-94f7ce4c    device
    - If you don't see your device attached (no second line), then try unplugging and replugging the USB cable and trying again; also check that Debugging via USB is enabled on the phone as mentioned in step 2. If you get a message saying that adb could not be found, you probably haven't set your path correctly (see prerequisites.)
    5. -
  5. Extract the base image zip file and navigate to the new directory, using for example: - 
    cd v18D_nightly_v4
    -
    6. -
  6. Run the flashing script by running the correct below command for your system - 
    # Windows
-flash.bat
-
-# Linux / OSX
-./flash.sh
    -
    7. -
- -
-

Note: if you don't see the right filename for your system, you can rename flash.bat or flash.sh back and forth as needed. The contents are the same.

-
- -
-

Note: Verify the contents of the base image using the checksum below:

- -
Checksum: SHA512(v18D_nightly_v4.zip)= 9105e29fd39da1ae487b01da4431a803d619d31482147b4383002b8a10268905fd444b108a438395a78d289cfe4e8fba10c3fb6b0d187f3535f027bf90c2391a Build id: 20150527010201
-
- -

At this point you should be on the latest 2.5 base image, and be able to receive OTA updates.

- -
-

Note: if you want to be on the very latest builds of flame (that have not been smoke tested), go to settings -> developer, scroll down to the bottom, and change the channel to nightly-latest.  Reboot the device, then go back to settings -> device info and check for updates.  You can update to the latest version without having to shallow flash.  For shallow flashing see the next section.

-
- -

Update channel reset bug

- -

As mentioned in {{bug(1217490)}}, some Firefox OS testers testing Firefox OS 2.5 latest OTA updates (on Flame, but also on other dogfooding devices) may find that when they install an OTA update, their update channel is reset to nightly, meaning that they won’t receive subsequent OTA updates coming through other channels. To avoid this, it is recommended that you set your  update channel to nightly-latest in the Firefox OS settings via WebIDE. To do this:

- -
    -
  1. Plug your phone into your computer via USB (make sure Debugging via USB is set to ADB and DevTools in the Phone's Developer Settings)
    2. -
  2. Go to Firefox Desktop and open WebIDE.
    3. -
  3. Connect WebIDE to your phone by selecting it under USB Devices. Accept the connection prompt that appears on your phone.
    4. -
  4. Under Other on the right hand side of the WebIDE UI, select Device Settings.
    5. -
  5. Find app.update.channel in the list, and change the setting value in the corresponding textbox to nightly-latest.
    6. -
  6. Find app.update.channel.backup and change the setting value to nightly-latest if you want it to persist after further updates.
    7. -
- -

Shallow Flash to the latest Firefox OS nightly (Gaia and Gecko)

- -

This set of steps only needs to be done if you want to update to the VERY latest builds (see {{anch("Updating your Flame to a nightly build")}} if you require more details.)

- -
Prerequisites: Windows users will need to install Cygwin, which provides a Linux-like environment on Windows. The instructions below include steps for how to automatically install the appropriate packages if you don't already have it installed.
- -
 
- -
    -
  1. Download the latest build from Mozilla Central.  Download both the b2g-XX.XX.en-US.android-arm.tar.gz and gaia.zip files.
    2. -
  2. All platforms: Download the shallow flash script in the same directory as the build files.
    3. -
  3. Windows users: Also download the shallow_flash.bat Windows script in the same directory. If you don't already have Cygwin installed, also download the installation file (you don't have to run it, the shallow_flash.bat script will use the installer to automatically configure the necessary packages).
    4. -
  4. In your terminal, cd into the directory you saved the files in and flash the builds to your phone using the following: - 
    # Linux
-./shallow_flash.sh --gaia=gaia.zip --gecko=b2g-XX.XX.en-US.android-arm.tar.gz
-
-# Mac
-./shallow_flash.sh --gaia gaia.zip --gecko b2g-XX.XX.en-US.android-arm.tar.gz
-
-# Windows
-# You could also double click the shallow_flash.bat icon (with the cogs) from Windows Explorer.
-shallow_flash.bat
    -
    5. -
- -

This process will flash gaia.zip and a single b2g-XX.XX.en-US.android-arm.tar.gz file onto your phone. The files will be sent to the device and it will reboot after the process completes.

- -
-

Note : On Linux, if the script fails during flashing Gaia, you can try replacing full options by their shortened version to see if that helps. Replace --gaia=gaia.zip by -g gaia.zip and --gecko=b2g-XX.XX.en-US.android-arm.tar.gz by -G b2g-XX.XX.en-US.android-arm.tar.gz.

-
- -

Updating & upgrading the Flame's software

- -

We have two main "channels" of Firefox OS software version releases for the Flame phone:

- - - -

Base Image

- -

You can get recovery files and tools at the following storage locations:

- -

Up-to-date (use these unless you have a good reason not to)

- - - -
-

Note: You can find out what base image your device is running using the command adb shell getprop ro.bootloader. The version is the last four characters, with the last one then removed, prefixed by 'v' (e.g. L1TC000118D0 > v18D).

-
- -
-

Important: When running a shallow or full flash, your phone data will be overwritten: you should therefore back up your data before updating! See the {{anch("Backing up and restoring your Flame data")}} section for more details.

-
- -

Outdated

- -

These base images are stable & production only.

- - - -
-

Note: Using a locale with base image v188 produces a mixed UI with locale and English languages.

-
- -
-

Note: Firefox OS images v180 and above are based on Android KK (Kitkat, 4.4); JB (Jellybean, 4.1–4.3) builds have now been discontinued and are no longer supported, so don't use anything older than v180.

-
- -

Base Image installation

- -

To install the base image on your device:

- -
    -
  1. Make sure remote debugging is enabled on your Flame, using the Remote debugging/Debugging via USB option in the device's Developer settings (the option is different, depending on whether you have Firefox 1.3 and under, or Firefox 1.4+ installed).
    2. -
  2. Connect your Flame to your computer via a USB cable if it isn't already. Verify that the computer is connected to the device by running the adb devices command in a terminal.
    3. -
  3. Download the base image .zip file referenced above. Unzip it onto your Desktop.
    4. -
  4. Go into the directory you extracted the software into and run it: -
      -
    • On Windows, enter the directory in your command prompt, then run the flash.bat script using flash.bat (or double click the file in explorer).
      - Note: If flash.bat is missing, simply rename the flash.sh file to flash.bat, then run that. Make sure you have adb and fastboot installed and available on PATH.
      • -
    • On Linux / OSX, enter the directory in your terminal, then run the flash.sh script using ./flash.sh (previous instructions encouraged you to use sudo. Don't. It is really dangerous to use sudo with things you download from the Internet. If the flash script fails to see your device, please double-check that your udev rules are correct). If you do not see a flash.sh file, simply rename flash.bat to flash.sh first and then use the above command.
      • -
    -
    5. -
- -
-

Note: If you get a "permission denied" error when running the above commands, your shell script probably doesn't have the right permissions. Running chmod +x flash.sh on it should solve this problem.

-
- -
-

Note: If the flash script gets stuck at "< waiting for device >" while the display shows "ThunderSoft(R)", the script doesn't have permission to access the device while in fastboot mode. You need to setup the udev rules to give it access. Also USB 3 ports may not work well with fastboot and can be the cause of this problem.

-
- -
-

Note: You are also welcome to build your own builds to install on the Flame: see Building and installing Firefox OS.

-
- -

Font fix

- -
-

Important: This step is only needed for base image v180.

-
- -

After updating Gecko and Gaia to nightly with the v180 base image, there will be a mismatch between the fonts that Gecko and Gaia expects and what the base image provides (this has been fixed as of v188). To fix this, you have two choices:

- - - -

Updating your Flame to a nightly build

- -
-

Note: For the current build, Nightly development builds of Firefox OS do not support A-GPS, which may lead to slow performance of GPS functionality. We plan to resolve this in an updated future Nightly channel.

-
- -
-

Important: When running a shallow or full flash, your phone data will be overwritten: you should therefore back up your data before updating! See the {{anch("Backing up and restoring your Flame data")}} section for more details.

-
- -
    -
  1. Before updating your phone to a Nightly build you should flash the latest base image to make sure the underlying systems are up to date. Download a base image with the same or a higher version of Firefox OS than the version you intend to use in step 3 below and use it to update your device's software, as explained above.
    2. -
  2. Because the above step installs a fresh operating system on your device, you'll need to enable remote debugging on your Flame again, using the Remote debugging option in the device's Developer settings.
    3. -
  3. Next, choose a build to install (found on https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/). You'll want one of the following: - -
    4. -
  4. Pick a version and download both the b2g-XX.XX.en-US.android-arm.tar.gz and gaia.zip files. Save them inside a directory on your Desktop called something like fxos.
    5. -
  5. Download the shallow flash script and save it in the same directory as the above two files.
    6. -
  6. For Windows users: Also download the shallow_flash.bat windows script and install Cygwin, which provides a Linux-like command environment on Windows. You will need to install the default Cygwin base category plus the unzip package but shallow_flash.bat will do this for you if you download and copy the Cygwin setup*.exe to the same folder as the script.
    7. -
  7. -

    In your Terminal, cd into the directory you saved the files in and Flash the builds to your phone using the following:

    - -

    Linux:

    - - 
    ./shallow_flash.sh --gaia=gaia.zip --gecko=b2g-XX.XX.en-US.android-arm.tar.gz
-
    - -

    Mac:

    - - 
    ./shallow_flash.sh --gaia gaia.zip --gecko b2g-XX.XX.en-US.android-arm.tar.gz
    - -

    Windows:

    - -

    Double click shallow_flash.bat (with the cogs icon) or run it from a command shell. It will flash gaia.zip and a single b2g-XX.XX.en-US.android-arm.tar.gz file.

    -
    8. -
- -
-

Note: If your update fails with an error "Flashing out/target/product/flame/system.img failed because the image was too large.", you will need to update to the newest {{anch("Base Image","base image")}}, then try applying the nightly build again. This is because the system partition size has been updated (see {{Bug("1184980")}}.)

-
- -
-

Note: If you get a "permission denied" error when running the above commands, your shell script probably doesn't have the right permissions. Running chmod +x shallow_flash.sh on it should solve this problem.

-
- -
-

Note: A "shallow flash" updates Gecko and Gaia plus data directories, as opposed to a full flash, which updates Gecko/Gaia, but also the underlying Gonk layer and associated binaries particular to that device type. This is why it is a good idea to update to the official base image first, as suggested above, then shallow flash over the top of that, once you've got the Gonk/binary layer right.

-
- -
-

Note: You can check the update status of each build on the Flame OTA status page.

-
- -

Once the install procedure finishes the phone should reboot into the updated build and display the first time user workflow.

- -

Switch to nightly update channel

- -

In v2.2 you can change the Update channel from default to nightly under Developer settings.

- -

Below is the older method, if you don't find that setting in your device.

- -
    -
  1. Make sure remote debugging is enabled on your Flame, using the Remote debugging/Debugging via USB option in the device's Developer settings.
    2. -
  2. Download the change channel script: follow the link, press the Raw button, then use your browser's save functionality to save the page directly as change_channel.sh.
    3. -
  3. In your Terminal, cd into the directory you saved the script in and change the update channel on your phone using the following command:
    - - 
    ./change_channel.sh -v nightly
    -
    4. -
  4. Once the phone reboots, check for updates by going into Settings > Device information > Check now.
    5. -
- -
-

Note: This step isn't needed in newer versions of the Firefox OS software — you should just get OTA updates automatically.

-
- -
-

Note: You can choose between several different update channels. Run "./change_channel.sh -h" to see the other channel options.

-
- -

Fastboot mode

- -

If flashing a new build to your phone fails to work, your phone may become unresponsive, leading to the phone rebooting in recovery mode. The recovery mode provides few options (Reboot, Update from adb, Wipe data, Wipe cache, and Update from sdcard). Unfortunately, selecting Update from adb triggers a sideload mode in which you cannot use the other adb commands. The adb sideload command would work but the various flash scripts rely on other adb commands.

- -

You can force fastboot mode as follows:

- -
    -
  1. Power off the phone (which may involve removing the battery in extreme cases...).
    2. -
  2. Plug in the USB cable.
    3. -
  3. Power the phone up again by pressing the Volume Down and Power buttons together.
    4. -
- -

The phone should now display the text "FASTBOOT": it is in fastboot mode and is waiting for a USB connection. At this point, a USB-connected, computer with adb installed should see the phone listed when the fastboot devices command is run. Note that regular adb would not see the device — only fastboot sees it. In this mode, you can use the flash script to install the last base image as explained above. As the script does use both adb and fastboot commands, you may see some initial error and warnings from adb, but the device should be flashed properly at the end of the procedure.

- -

Emergency download mode

- -

If flashing a new build to your phone fails to work, your phone becomes unresponsive, and the phone cannot enter fastboot mode, you can use emergency mode for recovery. You'll need the provided emergency USB cable with the “Recovery Cable” red label on it and the Emergency Download Tool to enter this mode. For full instructions, see the Flame emergency rescue tool tutorial included in the download tool's files. Contact the device maker (flameservice [at] thundersoft.com) if you need any more technical support.

- -

Emergency download tool dialog box as it is when it start.

- -
-

Note: The tool provided is Windows-only.

-
- -

Recovery mode

- -

You can enter recovery mode to clear your phone data or manually update the firmware. There are two ways to enter this mode:

- - - -

When in recovery mode, press the Volume up/down keys to move the selection highlight, and the Power key to select. Make sure you have your phone data (Contacts, SMS, etc.) backed up before clearing data, and your upgrade packages downloaded before updating.

- -

Backing up and restoring your Flame data

- -

When using a Flame, you won't want to lose your phone's contacts and other data while upgrading to a new build (as explained earlier in this article). To backup and restore data you can use our Backup and restore profile tool, which is contained in the B2G-flash-tool Git repo.

- -
    -
  1. To use this, first open up your terminal/command line.
    2. -
  2. Clone the above repo (you'll need Git installed) using - 
    git clone https://github.com/Mozilla-TWQA/B2G-flash-tool
    -
    3. -
  3. The tool is a Python file: backup_restore_profile.py. Make sure you have Python installed (2.7.x is probably best.) Linux and Mac systems should have this out of the box.
    4. -
  4. Enter the directory you just cloned using cd B2G-flash-tool.
    5. -
- -
-

Note: When using this tool, you'll also need to make sure that your phone is connected via USB to your computer, and that ADB (see {{anch("Important steps to follow first")}} above) and Debugging via USB (in your device's Developer settings) are enabled.

-
- -
-

Note: If you get a message complaining about lack of permissions to execute this file, cd into the directory where you saved the file, and run the following command:

- -
chmod +x backup_restore_profile.py
-
- -

Backing up data from your phone

- -

Before backing up you should make sure your device is updated with the most recent OTA update. To do this, on your phone go to Settings app > Device Information > Check for updates > click Check Now. If there is an update available, you should shortly get a notification of an available update. Choose to install the update.

- -

Now, in the directory where you saved the backup_restore_profile.py file, run the following:

- -
python backup_restore_profile.py -b
- -

This should save your device profile to a directory called mozilla-profile, in the same directory as the script is located.

- -
-

Warning: by default, it does not save the internal sd card content. So files like photos or videos from the gallery app will not be saved. If you want to backup the sd card content, add the --sdcard option

- -
python backup_restore_profile.py -b --sdcard
-
- -

Restoring data to your phone

- -

Before restoring you should again make sure your device is updated with the most recent OTA update. Go to Settings app > Device Information > Check for updates > click Check Now. If there is an update available, you should shortly get a notification of an available update. Choose to install the update.

- -

In the directory where your mozilla-profile directory is located (see above section), run the following:

- -
python backup_restore_profile.py -r
- -
-

Note: You can get a list of all the options the tool supports by running python backup_restore_profile.py -h.

-
- -

Pushing apps to your Flame

- -

The App Manager and WebIDE tools make it easy to push apps to your phone, for testing, etc.

- -

RAM adjustment

- -

You can adjust the available RAM capacity to see how apps perform on Firefox OS phones with lower memory footprints.

- -

This is accomplished by entering fastboot mode (install fastboot first, which is available on the same SDK page as ADB) and typing:

- -
adb reboot bootloader
-fastboot oem mem [0|256-1024]
- -

“0” is the memory automatically detected and “256-1024” is the number of megabytes. For example, if you want to adjust device RAM capacity to 512M, enter fastboot oem mem 512.

- -

You'll need to then reboot your device for the settings to take effect. This can be done using:

- -
fastboot reboot
- -

The current memory size can be returned by entering fastboot mode and typing:

- -
fastboot getvar mem
-
diff --git a/files/id/archive/b2g_os/phone_guide/index.html b/files/id/archive/b2g_os/phone_guide/index.html deleted file mode 100644 index bbfc5ecee3..0000000000 --- a/files/id/archive/b2g_os/phone_guide/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Firefox OS phone guide -slug: Archive/B2G_OS/Phone_guide -tags: - - Firefox OS - - Landing - - NeedsTranslation - - Phones - - TopicStub -translation_of: Archive/B2G_OS/Phone_guide ---- -
-

This section contains developer information relevant to specific phones that run Firefox OS — both developer and consumer devices. We have general information available on Building and installing Firefox OS and Hacking Firefox OS, so please go there for information about building and installing the platform from scratch. Developers with specific phones in their possession may however find the following articles useful.

-
- -

Developer phone information

- -

The phones listed here are specifically geared towards developers wanting to experiment with Firefox OS, including developing apps and contributing to the operating system itself. As such, they typically have unlocked SIMs, system files, etc.

- -
-
Flame
-
The Flame device is the official reference device for developing, testing, and debugging Firefox OS and open web apps, produced in partnership with T2Mobile.
-
Geeksphone
-
In this article we cover some basic tips on how to keep your Geeksphone up-to-date and how to tweak the system Gaia applications.
-
Nexus 5
-
This article provides information about using Firefox OS on a Nexus 5, including Flashing Firefox OS onto your device.
-
Nexus 4
-
This article provides information about using Firefox OS on a Nexus 4, including Flashing Firefox OS onto your device.
-
ZTE OPEN
-
This article contains information on the ZTE OPEN Firefox OS device.
-
ZTE OPEN C
-
The ZTE Open C is an updated ZTE-produced Firefox OS device, with higher end hardware and newer software.
-
- -

Consumer phone information

- -

The phones listed here are consumer models, so not ideal for developers wanting to hack on devices. However, might be still useful for developers looking for more technical information on these consumer models. For a more complete list of devices, see our Find Firefox OS near you page.

- -
-
Alcatel One Touch Fire
-
Based on Firefox OS 1.3 and available in more than 5 countries.
-
Alcatel One Touch Pixi 3 (3.5)
-
High-end consumer smartphone, powered by Firefox OS 2.0, with a 2 megapixel camera.
-
Alcatel Onetouch Fire 2C 4020D
-
Based on Tarako Firefox OS (1.3T) and released in India.
-
Alcatel Onetouch Fire C
-
Based on Tarako Firefox OS (1.3T) and released in India.
-
Alcatel Onetouch Fire E
-
Available in 5 countries.
-
Cherry Mobile Ace
-
Based on Firefox OS 1.3T and available in the Philippines.
-
Fx0
-
First Firefox OS phone released in Japan, by KDDI.
-
Huawei Y300 II
-
Based on Firefox OS 1.1 and available in the Philippines and Mexico.
-
Intex Cloud FX
-
First Firefox OS Tarako phone released in India and based on Firefox OS 1.3T.
-
LG Fireweb
-
Based on Firefox OS 1.1 and available in Uruguay and Brasil.
-
Spice Firefox MI FX1
-
Based on Tarako Firefox OS (1.3T) and released in India.
-
Spice Firefox MI FX2
-
High-end consumer 3G smartphone powered by FirefoxOS 1.4 with a 2 megapixel camera, released in India.
-
Symphony GoFox F15
-
First Firefox OS Device to come with 3G video calling capability, launched in Bangladesh.
-
Zen U105 Fire
-
Based on Firefox OS Tarako, available in India.
-
ZTE Open II
-
Has a1.2 GHz dual core processor and a 2.0 MP Rear Camera, available in 7 countries.
-
Orange Klif
-
The Orange Klif is a 3G Smartphone, powered by Firefox OS 2.0, with a 2 megapixel camera. It is available in a number of African countries.
-
- -

General Firefox OS information

- -
-
Firefox OS phone data
-
In this article we list the various available Firefox OS phones along with information such as their code names, availability, and specific hardware features.
-
General device features
-
This page lists typical Firefox OS hardware features and minimum hardware requirements.
-
Troubleshooting
-
This article provides tips for resolving common problems you may have while using Firefox OS.
-
Best practices for open reference devices
-
A set of best practices that we believe should come highly recommended for any widely available open reference devices. All of the recent Firefox OS reference devices have followed these practices.
-
diff --git a/files/id/archive/b2g_os/platform/index.html b/files/id/archive/b2g_os/platform/index.html deleted file mode 100644 index ec17b4cd1d..0000000000 --- a/files/id/archive/b2g_os/platform/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: The Firefox OS platform -slug: Archive/B2G_OS/Platform -translation_of: Archive/B2G_OS/Platform ---- -
-

The Firefox OS platform consists of many components. While you don't need to understand its architecture in order to build applications that run on Firefox OS, if you're working on developing or porting the platform — or are simply curious — the following documentation may be of interest to you.

-
- - - - - - - -
-

Documentation about the Firefox OS platform

-
-
- Firefox OS architecture overview
-
- An overview of how Firefox OS is structured internally; this is primarily of interest to platform developers and people doing porting work.
-
- Firefox OS apps architecture
-
- An overview of the application model on Firefox OS.
-
- Gaia
-
- Documentation about Gaia, the user interface application for Firefox OS devices; this is a Web application running atop the Firefox OS software stack.
-
- Gonk
-
- Documentation about Gonk, the operating system layer underneath Gaia. This consists of a Linux kernel and a hardware abstraction layer to which Gecko communicates.
-
- Gecko
-
- Gecko is the layer of Firefox OS that provides the same open web standards implementation used by Firefox and Thunderbird, as well as many other applications.
-
-  Security
-
- Documentation about security in Firefox OS; this includes topics about security devices from every perspective: for app developers, device integrators, and so forth.
-
- Out of memory management on Firefox OS
-
- This article explains how low memory situations are managed on Firefox OS, using the low memory killer and low memory notifications.
-
- Feature support chart
-
- A chart of which features are available in which types of Firefox OS builds.
-
- Firefox OS settings list
-
- A list of common setting names that can be used with the Settings API.
-
-

View All...

- 		-

Getting help from the community

-

If you're working with Firefox OS, or developing applications you'd like to run on Firefox OS devices, there are community resources to help you!

-
    -
  • Consult the Boot to Gecko project forum: {{ DiscussionList("dev-b2g", "mozilla.dev.b2g") }}
    • -
-
    -
  • Ask your question on Mozilla's Boot to Gecko IRC channel: #b2g
    • -
-

Don't forget about the netiquette...

-
- - -

Resources

- -
-

 

diff --git a/files/id/archive/b2g_os/quickstart/aplikasi_pertama_kamu/index.html b/files/id/archive/b2g_os/quickstart/aplikasi_pertama_kamu/index.html deleted file mode 100644 index ecc95018a2..0000000000 --- a/files/id/archive/b2g_os/quickstart/aplikasi_pertama_kamu/index.html +++ /dev/null @@ -1,210 +0,0 @@ ---- -title: Aplikasi Pertama Kamu -slug: Archive/B2G_OS/Quickstart/aplikasi_pertama_kamu -translation_of: Archive/B2G_OS/Quickstart/Your_first_app ---- -
-
-

Aplikasi Open web memberikan kemudahan kepada Pengembang web persis seperti apa yang mereka inginkan selama ini: lingkungan cross-platform yang didedikasikan untuk aplikasi yang diinstal dan dibuat hanya dengan menggunakan HTML, CSS, dan JavaScript saja - dengan Firefox OS sebagai yang pertama yang mendedikasikan platform Aplikasi Open web ini. Panduan ini bertujuan untuk membuat Anda belajar dan membangun aplikasi, dengan petunjuk arsitektur dasar dan petunjuk membangun Aplikasi sehingga Anda dapat membuat aplikasi besar berikutnya!

-
-

Jika Anda tidak ingin mengikuti panduan ini, Anda dapat men-download template aplikasi quick start kami. Cari tahu lebih banyak tentang apa ini, dengan membaca panduan Template aplikasi kami.

-

Struktur Aplikasi

-

Paket vs. Aplikasi yang dihost

-

Ada dua jenis aplikasi Open web yaitu: dikemas dan dihosting.

- -

Kedua jenis aplikasi ini memerlukan file manifest yang valid. Ketika tiba saatnya Anda ingin untuk mendaftarkan aplikasi Anda di Firefox Marketplace, Anda akan meng-upload aplikasi Anda sebagai file .zip atau memberikan URL di mana aplikasi anda dihosting.

-
-

-
-

Dibuat dalam kemitraan dengan Treehouse: Periksa mereka!

-
-
-

Untuk tujuan panduan ini, Anda akan membuat aplikasi host yang akan tinggal di alamat localhost Anda. Setelah aplikasi Anda sudah siap untuk daftar di Firefox Marketplace, Anda dapat membuat keputusan untuk bundel sebagai aplikasi dikemas atau meluncurkannya sebagai aplikasi host.

-

Manifests Aplikasi

-

Every Firefox app requires a manifest.webapp file at the app root. The manifest.webapp file provides important information about the app, such as version, name, description, icon location, locale strings, domains the app can be installed from, and much more. Only the name and description are required. The simple manifest included within the app template is similar to the following:

- 
{
-  "version": "0.1",
-  "name": "Open Web App",
-  "description": "Your new awesome Open Web App",
-  "launch_path": "/app-template/index.html",
-  "icons": {
-    "16": "/app-template/app-icons/icon-16.png",
-    "48": "/app-template/app-icons/icon-48.png",
-    "128": "/app-template/app-icons/icon-128.png"
-  },
-  "developer": {
-    "name": "Your Name",
-    "url": "http://yourawesomeapp.com"
-  },
-  "locales": {
-    "es": {
-      "description": "Su nueva aplicación impresionante Open Web",
-      "developer": {
-        "url": "http://yourawesomeapp.com"
-      }
-    },
-    "it": {
-      "description": "La tua nuova fantastica Open Web App",
-      "developer": {
-        "url": "http://yourawesomeapp.com"
-      }
-    }
-  },
-  "default_locale": "en"
-}
-
-

-
-

Made in partnership with Treehouse: Check them out!

-
-
-

 

-

A basic manifest is all you need to get started. For more details about manifests, read App Manifest.

-

App Layout & Design

-

Responsive design has become increasingly important as more screen resolutions become standard on different devices. Even if the main target of your app is mobile platforms such as Firefox OS, other devices will likely have access to it as well. CSS media queries allow you to adapt layout to device, as shown in this skeleton CSS example:

- 
/* The following are examples of different CSS media queries */
-
-/* Basic desktop/screen width sniff */
-@media only screen and (min-width : 1224px) {
-  /* styles */
-}
-
-/* Traditional iPhone width */
-@media
-  only screen and (-webkit-min-device-pixel-ratio : 1.5),
-  only screen and (min-device-pixel-ratio : 1.5) {
-  /* styles */
-}
-
-/* Device settings at different orientations */
-@media screen and (orientation:portrait) {
-  /* styles */
-}
-@media screen and (orientation:landscape) {
-  /* styles */
-}
-

There are many JavaScript and CSS frameworks available to aid in responsive design and mobile app development (Bootstrap, etc.) Choose the framework(s) that best fit your app and development style.

-

Web APIs

-

JavaScript APIs are being created and enhanced as quickly as devices are. Mozilla's WebAPI effort brings dozens of standard mobile features to JavaScript APIs. A list of device support and status is available on the WebAPI page. JavaScript feature detection is still the best practice, as shown in the following example:

- 
// If this device supports the vibrate API...
-if('vibrate' in navigator) {
-    // ... vibrate for a second
-    navigator.vibrate(1000);
-}
-

In the following example, the display style of a <div> is modified based on changes in the battery state of the device:

- 
// Create the battery indicator listeners
-(function() {
-  var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery,
-      indicator, indicatorPercentage;
-
-  if(battery) {
-    indicator = document.getElementById('indicator'),
-    indicatorPercentage = document.getElementById('indicator-percentage');
-
-    // Set listeners for changes
-    battery.addEventListener('chargingchange', updateBattery);
-    battery.addEventListener('levelchange', updateBattery);
-
-    // Update immediately
-    updateBattery();
-  }
-
-  function updateBattery() {
-    // Update percentage width and text
-    var level = (battery.level * 100) + '%';
-    indicatorPercentage.style.width = level;
-    indicatorPercentage.innerHTML = 'Battery: ' + level;
-    // Update charging status
-    indicator.className = battery.charging ? 'charging' : '';
-  }
-})();
-

In the code sample above, once you confirm that the Battery API is supported, you can add event listeners for chargingchange and levelchange to update the element's display. Try adding the following to the quickstart template, and see if you can get it working.

-

Check the WebAPI page frequently to keep up to date with device API statuses.

-

Install API functionality

-

In our sample quickstart app template, we've implemented an install button that you can click when viewing the app as a standard Web page, to install that site on Firefox OS as an app. The button markup is nothing special:

- 
<button id="install-btn">Install app</button>
-

This button's functionality is implemented using the Install API (see install.js):

- 
var manifest_url = location.href + 'manifest.webapp';
-
-function install(ev) {
-  ev.preventDefault();
-  // define the manifest URL
-  // install the app
-  var installLocFind = navigator.mozApps.install(manifest_url);
-  installLocFind.onsuccess = function(data) {
-    // App is installed, do something
-  };
-  installLocFind.onerror = function() {
-    // App wasn't installed, info is in
-    // installapp.error.name
-    alert(installLocFind.error.name);
-  };
-};
-
-// get a reference to the button and call install() on click if the app isn't already installed. If it is, hide the button.
-var button = document.getElementById('install-btn');
-
-var installCheck = navigator.mozApps.checkInstalled(manifest_url);
-
-installCheck.onsuccess = function() {
-  if(installCheck.result) {
-    button.style.display = "none";
-  } else {
-    button.addEventListener('click', install, false);
-  };
-};
-
-

Let's run through briefly what is going on:

-
    -
  1. We get a reference to the install button and store it in the variable button.
    2. -
  2. We use navigator.mozApps.checkInstalled to check whether the app defined by the manifest at http://people.mozilla.com/~cmills/location-finder/manifest.webapp is already installed on the device. This test is stored in the variable installCheck.
    3. -
  3. When the test is successfully carried out, its success event is fired, therefore installCheck.onsuccess = function() { ... } is run.
    4. -
  4. We then test for the existence of installCheck.result using an if statement. If it does exist, meaning that the app is installed, we hide the button. An install button isn't needed if it is already installed.
    5. -
  5. If the app isn't installed, we add a click event listener to the button, so the install() function is run when the button is clicked.
    6. -
  6. When the button is clicked and the install() function is run, we store the manifest file location in a variable called manifest_url, and then install the app using navigator.mozApps.install(manifest_url), storing a reference to that installation in the installLocFind variable. You'll notice that this installation also fires success and error events, so you can run actions dependent on whether the install happened successfully or not.
    7. -
-

You may want to verify the implementation state of the API when first coming to Installable web apps.

-
-

Note: Installable open web apps have a "single app per origin" security policy; basically, you can't host more than one installable app per origin. This makes testing a bit more tricky, but there are still ways around this, such as creating different sub-domains for apps, testing them using the Firefox OS Simulator, or testing the install functionality on Firefox Aurora/Nightly, which allows you to install installable web apps on the desktop. See FAQs about apps manifests for more information on origins.

-
-

WebRT APIs (Permissions-based APIs)

-

There are a number of WebAPIs that are available but require permissions for that specific feature to be enabled. Apps may register permission requests within the manifest.webapp file like so:

- 
// New key in the manifest: "permissions"
-// Request access to any number of APIs
-// Here we request permissions to the systemXHR API
-"permissions": {
-    "systemXHR": {}
-}
-

The three levels of permission are as follows:

- -

For more information on app permission levels, read Types of packaged apps. You can find out more information about what APIs require permissions, and what permissions are required, at App permissions.

-
-

It's important to note that not all Web APIs have been implemented within the Firefox OS Simulator.

-
-

Tools & Testing

-

Testing is incredibly important when supporting mobile devices. There are many options for testing installable open web apps.

-

Firefox OS Simulator

-

Installing and using the Firefox OS Simulator is the easiest way to get up and running with your app. After you install the simulator, it is accessible from the Tools -> Web Developer -> Firefox OS Simulator menu. The simulator launches with a JavaScript console so you can debug your application from within the simulator.

-

App Manager

-

The new kid on the block with regards to testing tools is called the App Manager. This tool allows you to connect desktop Firefox to a compatible device via USB (or a Firefox OS simulator), push apps straight to the device, validate apps, and debug them as they run on the device.

-

Unit Testing

-

Unit tests are extremely valuable when testing on different devices and builds. jQuery's QUnit is a popular client-side testing utility, but you can use any set of testing tools you'd like.

-

Installing Firefox OS on a Device

-

Since Firefox OS is an open source platform, code and tools are available to build and install Firefox OS on your own device. Build and installation instructions, as well as notes on what devices it can be installed on, can be found on MDN.

-

Dedicated Firefox OS developer preview devices are also available: read our Developer preview phone page for more information.

-

App Submission and Distribution

-

Once your app is complete, you can host it yourself like a standard web site or app (read Self-publishing apps for more information), or it can be submitted to the Firefox Marketplace. Your app's manifest will be validated and you may choose which devices your app will support (e.g. Firefox OS, Desktop Firefox, Firefox Mobile, Firefox Tablet). Once validated, you can add additional details about your app (screenshots, descriptions, price, etc.) and officially submit the app for listing within the Marketplace. Once approved, your app is available to the world for purchase and installation.

-

More Marketplace & Listing Information

-
    -
  1. Submitting an App to the Firefox OS Marketplace
    2. -
  2. Marketplace Review Criteria
    3. -
  3. App Submission Video Walkthrough
    4. -
-
diff --git a/files/id/archive/b2g_os/quickstart/index.html b/files/id/archive/b2g_os/quickstart/index.html deleted file mode 100644 index ebe1f7c220..0000000000 --- a/files/id/archive/b2g_os/quickstart/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Build -slug: Archive/B2G_OS/Quickstart -tags: - - NeedsTranslation - - TopicStub -translation_of: Archive/B2G_OS/Quickstart ---- -
-

Quickstart information on coding open web apps.

-
-
-
- Introduction to open web apps
-
- What are open web apps? How they differ from regular web pages? Why is this significant? This article aims to answer these questions and more.
-
- Your first app
-
- This article takes you through the basic steps and additional knowledge on top of regular web development required to create installable open web apps.
-
- Introduction to Firefox OS
-
- An introduction to Firefox OS, Mozilla's new open web app-based mobile platform.
-
- Introduction to manifests
-
- An FAQ designed to answer any questions you may have about manifests, hosting apps, origins, and other such topics.
-
- App development for web developers
-
- If you're a web developer, how do open web apps differ from what you're used to? This article explains all.
-
- App development for mobile developers
-
- If you're a native mobile application developer, what advantages can open web apps bring to you, and how do they differ from what you are used to? Here are some ideas.
-
- Developing app functionality
-
- This page talks about the kinds of different functionality that you might want to build into your apps, with links to further information.
-
- Payments
-
- How do you build functionality to make people pay for installing your open web apps? Here is the lowdown.
-
- App tools
-
- Last for this section, we provide some links to more information on the tools available to help you develop great open web apps.
-
diff --git a/files/id/archive/b2g_os/simulator/index.html b/files/id/archive/b2g_os/simulator/index.html deleted file mode 100644 index 6bc32a3c38..0000000000 --- a/files/id/archive/b2g_os/simulator/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Firefox OS Simulator -slug: Archive/B2G_OS/Simulator -translation_of: Archive/B2G_OS/Simulator ---- -
-

Halaman ini menjelaskan Firefox OS Simulator untuk pengembang menargetkan Firefox OS 1.2 atau yang lebih baru. Jika Anda sedang mengembangkan aplikasi untuk Firefox OS 1.1, maka Anda harus memeriksa dokumentasi untuk Firefox OS 1.1 Simulator gantinya.

-
- -

Firefox OS Simulator adalah versi dari lapisan yang lebih tinggi dari Firefox OS yang mensimulasikan perangkat Firefox OS, tapi berjalan pada desktop. Ini berarti bahwa dalam banyak kasus, Anda tidak perlu perangkat nyata untuk menguji dan men-debug aplikasi Anda. Ini berjalan di jendela ukuran yang sama sebagai perangkat Firefox OS, termasuk antarmuka pengguna Firefox OS dan built-in aplikasi, dan mensimulasikan banyak dari Firefox OS perangkat API.

- -

 

- -

Simulator ini dikemas dan didistribusikan sebagai Firefox add-on. Setelah Anda download dan diinstal di Firefox, Anda dapat menjalankannya, mendorong aplikasi untuk itu, dan melampirkan alat pengembang untuk itu menggunakan App Manajer alat atau WebIDE.

- -

Instalasi

- -

Untuk menginstal simulator, menggunakan WebIDE ini Mengelola penambahan Komponen panel (tersedia sebagai bagian dari Firefox 34 dan seterusnya). Beberapa versi yang tersedia, dan Anda disarankan untuk menginstal mereka semua, untuk fleksibilitas maksimum.

- -
-

Dimulai dengan Firefox 43, tentang: halaman addons mungkin menampilkan peringatan tentang addon Anda menjadi unsigned. Simulator yang benar ditandatangani pada waktu menginstal, namun mereka kemudian dimodifikasi sehingga muncul "rusak". Mereka akan terus berjalan dengan sukses meskipun pesan peringatan ini. Rinciannya di bug 1.197.262.

-
- -

Untuk memulai Simulator, Anda memilih dari daftar runtime WebIDE ini. Untuk lebih jelasnya, lihat petunjuk pada dokumentasi WebIDE. Setelah menjalankan Simulator, Anda dapat mendorong aplikasi untuk itu dan debug mereka menggunakan WebIDE, seperti yang Anda bisa dengan perangkat nyata.

- -

Jika Anda menggunakan Manajer App (alat tua tersedia sebelum WebIDE), Anda dapat menginstal simulator melalui tombol berikut:

- -

Install Simulator

- -

Simulator UI

- -

Simulator muncul sebagai jendela terpisah, berukuran sehingga area layar simulasi adalah 320x480 piksel. Untuk mensimulasikan peristiwa sentuhan Anda dapat mengklik tombol mouse dan tarik sambil memegang tombol ke bawah. Jadi dengan mengklik dan menyeret kanan-ke-kiri dari Home Screen, Anda akan melihat aplikasi built-in, serta setiap aplikasi yang telah ditambahkan:

- -

- -

Simulator ini memiliki dua tombol di toolbar di bagian bawah:

- - - -

Emulasi kartu SD

- -

Dalam Simulator kartu SD perangkat dipetakan ke "fake-sdcard" direktori di profil Simulator ini, yang itu sendiri terletak di dalam "ekstensi" direktori di bawah profil Firefox yang Simulator diinstal. Sebagai contoh:

- -
/path/to/Firefox/Profiles/Firefox-profile-name/extensions/fxos_2_2_simulator@mozilla.org/profile/fake-sdcard
- -

File membaca atau menulis menggunakan getDeviceStorage API akan muncul di sini.

- -

Sebelum versi 2.2 dari Simulator, Anda harus menciptakan "palsu-sdcard" direktori secara manual untuk bekerja. Dari 2,2 dan seterusnya, "palsu-sdcard" direktori dibuat untuk Anda secara otomatis.

- -

Juga dari versi 2.2 dan seterusnya, jika Anda menjalankan Simulator dari baris perintah Anda dapat menentukan direktori yang berbeda dengan melewati --storage-path option.

- -

.

- -
Catatan: ini sebagian besar dimaksudkan untuk pengujian API. Musik akan dibaca tidak dari "palsu-sdcard" direktori, tapi dari sistem anda ~/Music gambar dari ~/Pictures video dari ~/Videos Download pergi ke ~/Downloads user-dirs.dirs redefinitions didukung.
- -

Keterbatasan Simulator

- -

Perhatikan bahwa Firefox OS Simulator bukan simulasi sempurna.

- -

Keterbatasan hardware

- -

Terlepas dari ukuran layar, Simulator tidak mensimulasikan keterbatasan perangkat keras dari perangkat Firefox OS seperti memori yang tersedia atau kecepatan CPU.

- -

Codec audio / video

- -

Codec berikut tergantung pada decoding hardware-accelerated dan karena itu belum didukung:

- - - -

Ini berarti tidak mungkin untuk menggunakan Simulator untuk pemutaran video tes di aplikasi dan di website seperti Youtube yang mengandalkan codec ini.

- -

API yang tidak didukung

- -

API tertentu yang bekerja pada perangkat tidak akan bekerja pada Simulator, umumnya karena hardware pendukung tidak tersedia pada desktop. Kami telah menerapkan simulasi untuk beberapa API seperti geolocation, dan berharap untuk menambahkan lebih banyak dalam rilis mendatang. Namun, saat ini API tidak didukung. Menggunakan mereka mungkin melemparkan kesalahan atau hanya mengembalikan hasil yang salah:

- - - -

 

- -

Mendapatkan bantuan

- -

Jika Anda memiliki pertanyaan, mencoba meminta kami pada daftar dev-pengembang-alat mailing atau #devtools pada irc.mozilla.org.

- -

Cara mengaktifkan verbose logging

- -

Anda dapat melihat pesan login dari aplikasi Anda di Web Console, yang dapat Anda melampirkan ke aplikasi Anda menggunakan WebIDE. Jika Anda ingin menangkap pesan awal terjadi selama startup aplikasi, sebelum konsol akan terhubung dan bekerja, Anda dapat mengaktifkan verbose logging di Simulator.

- -

Kunjungi about: config dan menciptakan preferensi baru. Nama preferensi yang berbeda untuk setiap versi Simulator:

- - - -

Set ke nilai string "semua", dan menonaktifkan, kemudian mengaktifkan kembali, add-on di Add-on manajer. Sekarang pesan tambahan tentang operasi Simulator akan muncul di Browser Console.

- -

Membangun Simulator

- -

Jika Anda ingin menguji patch ke Gecko atau Gaia kode yang Simulator mengandung, Anda mungkin tertarik dalam memodifikasi simulator untuk menggunakan kustom Gecko membangun atau profil Gaia. Atau, Anda dapat membangun Simulator baru dari checkout Gecko Anda.

- -

Alternatif

- -

Berbagai cara untuk menjalankan Gaia - termasuk daftar mereka dalam rangka kemudahan untuk menjalankan dan ketertiban kedekatan membalikkan untuk produk dikirim (sesuai dengan itu, Firefox OS Simulator paling mudah tapi terjauh.

diff --git a/files/id/archive/b2g_os/using_the_app_manager/index.html b/files/id/archive/b2g_os/using_the_app_manager/index.html deleted file mode 100644 index 39a43a9762..0000000000 --- a/files/id/archive/b2g_os/using_the_app_manager/index.html +++ /dev/null @@ -1,233 +0,0 @@ ---- -title: Using the App Manager -slug: Archive/B2G_OS/Using_the_App_Manager -translation_of: Archive/B2G_OS/Using_the_App_Manager ---- -
-

The App Manager is a new tool available in Firefox for Desktop, which provides a number of useful tools to help you test, deploy and debug HTML5 web apps on Firefox OS phones and the Firefox OS Simulator, directly from your browser.

-
- -

{{EmbedYouTube("z1Bxg1UJVf0")}}

- -

The App Manager is composed of:

- - - -

Quick setup:

- -

This section is designed to get you up and running as soon as possible; if you need some more detail please skip forward to the {{ anch("Device and system configuration") }} section and start reading from there.  Also see the {{ anch("Troubleshooting") }} section for help if you are having trouble.

- -
    -
  1. Make sure you have Firefox Desktop 26+ installed
    2. -
  2. Open the App Manager (in the URL bar, type about:app-manager)
    3. -
  3. If you don't have a real device: -
      -
    1. Install the Firefox OS Simulator
      2. -
    2. In App Manager's bottom toolbar, click on Start Simulator, then click on the name of the installed simulator, which should appear there.
      3. -
    -
    4. -
  4. If you have a real device: -
      -
    1. Make sure your device is running Firefox OS 1.2+
      2. -
    2. In the Settings of your device, disable Screen Lock (Settings > Screen Lock) and enable Remote Debugging (Settings > Device information > More information > Developer)
      3. -
    3. Install the ADB Helper add-on in Firefox Desktop
      4. -
    4. Connect your device to your machine via a USB cable
      5. -
    5. You should see the name of your device in the App Manager's bottom bar. Click on it.
      6. -
    -
    5. -
  5. The bottom bar should show "Connected to: xxx"
    6. -
  6. Click on the Apps panel and add an app (packaged or hosted)
    7. -
  7. The Refresh button validates your app and installs it on the Simulator/Device
    8. -
  8. The Debug button connects the developer tools to the running app
    9. -
- -

Device and system configuration

- -

The first thing you'll need to do when using the App Manager is make sure your system and phone are set up correctly. This section will run thrugh all the steps required.

- -

Firefox 1.2+ required

- -

Make sure your device is running Firefox OS 1.2/Boot2Gecko 1.2 or higher. To check which version of Firefox OS the device is runing, go to Settings > Device Information > Software.

- -

If you don't have a high enough version installed, depending on what phone you have you will need to either install an available nightly build of Firefox 1.2+, or configure and build it yourself from source.

- -

Builds available:

- - - -

To build your own Firefox OS 1.2+ distribution, follow the instructions located at Building and installing Firefox OS, starting with Firefox OS build prerequisites.

- -

Remote debugging

- -

Next, you need to enable remote debugging in Firefox OS. To do so, go to Settings > Device information > More information > Developer and check the Remote Debugging checkbox.

- -

ADB or ADB helper

- -

The process uses the Android Debug Bridge (ADB) to handle the device-computer connection and communication. There are two options for running ADB:

- - - -
-

Note: There's no need to run this command if you installed the ADB Helper Add-on.

-
- -

Connecting your device to the App Manager

- -

With all your configuration done, it's now time to plug your device into your computer and start the App Manager:

- -
    -
  1. Plug the device into your computer via USB.
    2. -
  2. Disable Screen lock on your device by going to Settings > Screen Lock and unchecking the Lock Screen checkbox. This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.
    3. -
  3. Start the App Manager — In Firefox Desktop select the Tools > Web Developer > App Manager menu option, or type about:app-manager in the URL bar.
    4. -
  4. At the bottom of the App Manager tab, you will see a connection status bar (see screenshot below). You should be able to connect your device by clicking the "Connect to localhost:6000" button.
    5. -
  5. If this works successfully, a prompt should appear on your device: "An incoming request to permit remote debugging connection was detected. Allow connection?". Tap the OK button (You may also have to press the power button on the phone so you can see the prompt.) The connection status bar should update to say "Connected to B2G", with a Disconnect button available to press if you want to cancel the connection.
    6. -
- -

- -
-

Note that the other controls in the connection status bar allow you to connect a simulator to the App Manager, which we cover in the next section, below, and change the port that the connection happens on. If you change the port, you'll also need to enable port forwarding for this port as well, as instructed in the {{anch("Enable port forwarding")}} section, above.

-
- -

Using a Firefox OS Simulator Add-on

- -

If you haven't got a real device available to use with App Manager, you can still try it out using a Firefox OS Simulator Add-on. To start off, install the appropriate simulator for your operating system:

- -

Install Simulator

- -
-

Note that currently there is only a Firefox OS 1.2 simulator available, although more may appear in the future.

-
- -

Once you've installed the simulator, you need to go to the connection status bar at the bottom of the App Manager tab, and click the "Start simulator" button. Three buttons will appear:

- - - -

Apps panel

- -

Now everything is working, let's review the functionality available inside the App Manager, starting with the Apps Panel. From here, you can import an existing app to push onto your device and debug:

- - - -

Information about your app should appear on the right hand side of the window, as seen below:

- -

- -

Clicking on "Update" will update (install) the app on the device. Clicking on "debug" will connect a toolbox to the app, allowing you to debug its code directly:

- -

- -
-

Note: You'll enjoy playing around with the toolbox — try altering the DOM, CSS etc. and you'll see the updates reflected on the device in realtime. Such updates will be saved on the installed app code; you'll see them next time you open the app on the device.

-
- -

If an app was not added successfully — for example if the URL was incorrect, or you selected a packaged app folder — an entry will be added to the page for this app, but this will include error information.

- -

- -

You can also delete an app from this view, by hovering over the App name/description on the left of the window, and pressing the "X" button that appears in each case. This however doesn't remove the app from the device. To do that you need to manually remove the app using the device itself.

- -

Device panel

- -

The Device tab displays information about the connected device. From the "Installed Apps" window, apps on the device can be started and debugged.

- -

- -
-

Note: Certified Apps are not listed by default. See how to debug certified apps.

-
- -

The "Permissions" window shows the required priviledges for different Web APIs on the current device:

- -

- -

Finally, you can take a screenshot of the current device display by clicking the "Screenshot" button. The screenshot appears in a new tab on Firefox, and from there you can save or discard it as you wish.

- -

Debugging Certified Apps

- -

Currently only devices running a development build of Firefox OS 1.2 are capable of debugging certified apps. If you have a development build, you can enable certified app debugging by changing the pref devtools.debugger.forbid-certified-apps to false in your profile. To do this, follow the steps below:

- -
    -
  1. -

    On your computer, enter the following command in Terminal/console to enter your device's filesystem via the shell:

    - - 
    adb shell
    - -

    Your prompt should change to root@android.

    -
    2. -
  2. -

    Next, stop B2G running using the following command:

    - - 
    stop b2g
    -
    3. -
  3. -

    Navigate to the following directory:

    - - 
    cd /data/b2g/mozilla/*.default/
    -
    4. -
  4. -

    Here, update the prefs.js file with the following line:

    - - 
    echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js
    -
    5. -
  5. -

    After you've finished editing and saving the file, start B2G again using the following command:

    - - 
    start b2g
    -
    6. -
  6. -

    Exit the android filesystem using the exit command; this will return you to your normal terminal prompt.

    -
    7. -
  7. -

    Next, reconnect to the App Manager and you should see certified apps appear for debugging.

    -
    8. -
- -
-

Note: If you want to add this preference to your Gaia build you can run make DEVICE_DEBUG=1 reset-gaia.

-
- -

Troubleshooting

- -

If the device is not recognized:

- - - -

Can't connect your device to the App Manager or start the simulator? Let us know or file a bug.

diff --git a/files/id/archive/css3/index.html b/files/id/archive/css3/index.html deleted file mode 100644 index 0c5eae08d5..0000000000 --- a/files/id/archive/css3/index.html +++ /dev/null @@ -1,972 +0,0 @@ ---- -title: CSS3 -slug: Archive/CSS3 -translation_of: Archive/CSS3 ---- -

CSS3 merupakan perubahan terakhir dari bahasa Cascading Style Sheets dan bertujuan untuk perpanjangan dari CSS2.1. Menghadirkan banyak  catatan yang lama dinantikan, seperti di seputar lingkaran sudut, bayangan, gradients, transitions or animations, sama halnya pada layout baru multi-columns (beberapa kolom), flexible box (kemudahan tampilan) atau grid layouts. Bagian bagian pengalaman vendor-prefixed (penyedia-memperbaharui) dan kemungkinan yang lainnya dihilangkan dalam lingkungan pembuatan, atau digunakan dengan berlebihan menyebabkan keduanya syntax (penulisan) and semantics (bentuk penulisan) dapat berubah kemudian.

- -

Modul and Proses Standarisasi

- -

CSS Tingkat 2 diperlukan 9 tahun, dari Agustus 2002 sampai Juni 2011 yang kaya status rekomendasi. Ini merupakan tindakan nyata bahwa featur bagian kedua kembali didasarkan pada spesifikasi yang menyeluruh. Dalam melengkapi percepatan featur standarisasi tanpa gangguan, the CSS Working Group of the W3C (Pekerjaan Group CSS W3C), dalam sebuah bagian mereferensi pada Beijing doctrine, CSS dibagi dalam komponen komponen lebih kecil disebut modules . Masing masing modul sekarang ini merupakan sebuah bagian yang berdiri sendiri dari bahasa dan bergerak pada standarisasi percepatannya sendiri. Selagi beberapa modul telah menjadi rekomendasi W3C, yang lainnya masih merupakan bagian yang baru dalam rancangan atau draft pekerjaan. Modul modul baru juga ditambahkan ketika dibutuhkan pengidentifikasin baru.

- -

CSS Modules and Snapshots as defined since CSS3 Secara bentukan, tidak ada uraian standar CSS. Masing masing modul dijadikan standar secara independen. Standar CSS terdiri dari CSS2.1 perubahan and diperpanjang dengan modul yang lengkap. Seluruhnya tidak diperlukan pada angka yang sama. Di tiap tiap titik waktu, sebuah snapshot (tampilan) dari standar CSS dapat digambarkan, daftar CSS2.1 dan modul saat ini.

- -

Konsorsium W3C secara priode dipublikasikan yang menampilkan, seperti dalam tahun 2007 atau 2010.

- -

Meski hari ini tanpa modul dengan tingkat yang lebih tinggi dari standarisasi CSS3, ini dapat berubah ke depannya. Beberapa modul, seperti Selectors 4 or CSS Borders and Backgrounds Level 4 telah mempunyai sebuah rancangan atau draft editor, meski mereka belum diperkaya dengan publikasi awal status Draft atau Rancangan Pekerjaan.

- -

Status Modul CSS

- -

Stabilitas Modul

- -

Sedikitnya modul CSS telah stabil secara bersamaan dan telah kaya dari satu atau tiga tingkatan rekomensasi dari CSSWG: Rekomendasi Kandidat, Proposal Rekomendasi atau Rekomendasi. Ini dapat digunakan tanpa sebelum perbaikan dan merupakan kestabilan yang baik, meski sedikitnya featur dapat dihilangkan pada Tingkat Kandidat Rekomendasi.

- -

Perpanjangan modul modul ini dan perubahan CSS2.1 spesifikasi yang mana membangun inti dari spesifikasi. Bersamaan dengan itu, mereka adalah tampilan sekarang dari spesifikasi CSS.

- - - - - - - - - - - -
{{ SpecName("CSS3 Colors", "", "") }}{{ Spec2("CSS3 Colors") }} since June 7th, 2011
-

Adds the {{ cssxref("opacity") }} property, and the hsl(), hsla(), rgba() and rgb() functions to create {{cssxref("<color>")}} values. It also defines the currentColor keyword as a valid color.

- -

The transparent color is now a real color (thanks to the support for the alpha channel) and is a now an alias for rgba(0,0,0,0.0) .

- -

It deprecates the system-color keywords that shouldn't be used in a production environment anymore.

-
- - - - - - - - - - - -
{{ SpecName("CSS3 Selectors", "", "") }}{{ Spec2("CSS3 Selectors") }} since September 29th, 2011
-

Adds:

- -
    -
  • Substring matching attribute selectors, E[attribute^="value"], E[attribute$="value"], E[attribute*="value"] .
    • -
  • New pseudo-classes: {{ cssxref(":target") }}, {{ cssxref(":enabled") }} and {{ cssxref(":disabled") }}, {{ cssxref(":checked") }}, {{ cssxref(":indeterminate") }}, {{ cssxref(":root") }}, {{ cssxref(":nth-child") }} and {{ cssxref(":nth-last-child") }}, {{ cssxref(":nth-of-type") }} and {{ cssxref(":nth-last-of-type") }}, {{ cssxref(":last-child") }}, {{ cssxref(":first-of-type") }} and {{ cssxref(":last-of-type") }}, {{ cssxref(":only-child") }} and {{ cssxref(":only-of-type") }},{{ cssxref(":empty") }}, and {{ cssxref(":not") }}.
    • -
  • Pseudo-elements are now characterized by two colons rather than one: :after becomes {{ cssxref("::after") }}, :before becomes {{ cssxref("::before") }}, :first-letter becomes {{ cssxref("::first-letter") }}, and :first-line becomes {{ cssxref("::first-line") }}.
    • -
  • The new general sibling combinator ( h1~pre ).
    • -
-
- -

The next iteration of the Selectors specification is already in progress, though it still hasn't reached the First Public Working Draft stage.

- - - - - - - - - - - -
{{ SpecName("CSS3 Namespaces", "", "") }}{{ Spec2("CSS3 Namespaces") }} since September 29th, 2011
-

Adds the support for the XML Namespaces by defining the notion of CSS qualified name, using the ' | ' syntax and adding the {{ cssxref("@namespace") }} CSS at-rule.

-
- - - - - - - - - - - -
{{ SpecName("CSS3 Media Queries", "", "") }}{{ Spec2("CSS3 Media Queries") }} since June 19th, 2012
-

Extends the former media type ( print, screen, … ) to a full language allowing queries on the device media capabilities like only screen and (color) .

- -

Media queries are not only used in CSS document but also in some attributes of HTML Elements, like the {{ htmlattrxref("media","link") }} attribute of the {{ HTMLElement("link") }} element.

-
- -

The next iteration of this specification is in the work, allowing to tailor a Web site regarding the input methods available on the user agent, with new media features like hover or pointer. Detection of EcmaScript support, using the script media features is also proposed.

- - - - - - - - - - - -
{{ SpecName("CSS3 Style", "", "") }}{{ Spec2("CSS3 Style") }} since November 7th, 2013
Formally defines the syntax of the content of the HTML style global attribute.
- - - - - - - - - - - -
{{ SpecName("CSS3 Backgrounds", "", "") }}{{ Spec2("CSS3 Backgrounds") }}
-

Adds:

- -
    -
  • Support, on backgrounds, for any type of {{cssxref("<image>")}}, and not only for uri() defined ones.
    • -
  • Support for multiple background images.
    • -
  • The {{ cssxref("background-repeat") }} space and round values, and for the 2-value syntax of this CSS property.
    • -
  • The {{ cssxref("background-attachment") }} local value.
    • -
  • The CSS {{ cssxref("background-origin") }}, {{ cssxref("background-size") }}, and {{ cssxref("background-clip") }} properties.
    • -
  • Support for curved border corners, with the CSS {{ cssxref("border-radius") }}, {{ cssxref("border-top-left-radius") }}, {{ cssxref("border-top-right-radius") }}, {{ cssxref("border-bottom-left-radius") }}, and {{ cssxref("border-bottom-right-radius") }} properties.
    • -
  • Support for the use of an {{cssxref("<image>")}} as the border with the CSS {{ cssxref("border-image") }}, {{ cssxref("border-image-source") }}, {{ cssxref("border-image-slice") }}, {{ cssxref("border-image-width") }}, {{ cssxref("border-image-outset") }}, and {{ cssxref("border-image-repeat") }} properties.
    • -
  • Support for shadows of the element with the CSS {{ cssxref("box-shadow") }} property.
    • -
-
- -

The CSS4 iteration of the Backgrounds and Borders specification is already in progress, though it still hasn't reached the First Public Working Draft stage, it plans to add the ability to clip a border (with the CSS {{ cssxref("border-clip") }}, {{ cssxref("border-clip-top") }}, {{ cssxref("border-clip-right") }}, {{ cssxref("border-clip-bottom") }}, and {{ cssxref("border-clip-left") }} properties) or to control the shape of the border in a corner (using the CSS {{ cssxref("border-corner-shape") }} property).

- - - - - - - - - - - -
{{ SpecName("CSS3 Multicol", "", "") }}{{ Spec2("CSS3 Multicol") }}
Adds support for easy multi-column layouts using the CSS {{ cssxref("columns") }}, {{ cssxref("column-count") }}, {{ cssxref("column-fill") }}, {{ cssxref("column-gap") }}, {{ cssxref("column-rule") }}, {{ cssxref("column-rule-color") }}, {{ cssxref("column-rule-style") }}, {{ cssxref("column-rule-width") }}, {{ cssxref("column-span") }}, {{ cssxref("column-width") }}, {{ cssxref("break-after") }}, {{ cssxref("break-before") }}, and {{ cssxref("break-inside") }}.
- - - - - - - - - - - -
{{ SpecName("CSS3 Speech", "", "") }}{{ Spec2("CSS3 Speech") }}
Defines the speech media type, an aural formatting model and numerous properties specific for speech-rendering user agents.
- - - - - - - - - - - -
{{ SpecName("CSS3 Images", "", "") }}{{ Spec2("CSS3 Images") }}
-

Defines the {{cssxref("<image>")}} data type.

- -

Extends the url() syntax to support image slices using media fragments.

- -

Adds:

- -
    -
  • The dppx unit to the {{cssxref("<resolution>")}} data type.
    • -
  • The image() function as a more flexible alternative to url() to define an image from an url.
    - At risk : due to insufficient browser support, standardization of the image() function may be postponed to the next iteration of this module .
    • -
  • Support for linear-gradient(), repeating-linear-gradient(), radial-gradient() and repeating-radial-gradient().
    • -
  • The ability to define how a replaced element should fit in its element, using the CSS {{ cssxref("object-fit") }} property.
    - At risk : due to insufficient browser support, standardization of the {{ cssxref("object-fit") }} and property may be postponed to the next iteration of this module .
    • -
  • The ability to override the resolution and orientation of an external image using the CSS {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties.
    - At risk : due to insufficient browser support, standardization of the {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties may be postponed to the next iteration of this module .
    • -
-
- -

The CSS Image Values and Replaced Content Level 4 which will supersede CSS Image Level 3 is in development and is a {{Spec2("CSS4 Images")}}.

- - - - - - - - - - - -
{{ SpecName("CSS3 Values", "", "") }}{{ Spec2("CSS3 Values") }}
-

Makes initial and inherit keywords usable on any CSS property.

- -

Formally defines the CSS data types of CSS 2.1, that were implicitely defined by their grammar token and some textual precisions.

- -

Adds:

- -
    -
  • Definition for new font-relative length units: rem and ch .
    • -
  • Definition for viewport-relative length units: vw, vh, vmax, and vmin .
    • -
  • Precision about the real size of the absolute length units, which are not really absolute, but defined in relation with the reference pixel .
    • -
  • Definition for {{ cssxref("<angle>") }}, {{cssxref("<time>")}}, {{cssxref("<frequency>")}}, {{cssxref("<resolution>")}}.
    • -
  • Normative value to the definition of {{cssxref("<color>")}}, {{cssxref("<image>")}}, and {{ cssxref("<position>") }}.
    • -
  • Definition for the {{ cssxref("calc", "calc()") }}, {{ cssxref("attr", "attr()")}}, and toggle() functional notations.
    - At risk: due to insufficient browser support, standardization of the calc(), attr(), and toggle() functional notations may be postponed to the next iteration of this module.
    • -
-
- -

Several types definition, like <ident> and <custom-ident>, have been deferred to CSS Values and Units Module Level 4.

- - - - - - - - - - - -
{{ SpecName("CSS3 Flexbox", "", "") }}{{ Spec2("CSS3 Flexbox") }}
Add a flexbox layout to the CSS {{ cssxref("display") }} property and several new CSS properties to control it: {{ cssxref("flex") }}, {{ cssxref("flex-align") }}, {{ cssxref("flex-direction") }}, {{ cssxref("flex-flow") }}, {{ cssxref("flex-item-align") }}, {{ cssxref("flex-line-pack") }}, {{ cssxref("flex-order") }}, {{ cssxref("flex-pack") }}, and {{ cssxref("flex-wrap") }}.
- - - - - - - - - - - -
{{ SpecName("CSS3 Conditional", "", "") }}{{ Spec2("CSS3 Conditional") }}
Adds features for conditional processing of parts of style sheets, conditioned on capabilities of the browser or the document the style sheet is being applied to. It consists mainly in allowing nested at-rules inside {{ cssxref("@media") }} and the adding of a new CSS at-rule, {{ cssxref("@supports") }}, and a new DOM method {{domxref("CSS.supports()")}}.
- - - - - - - - - - - -
{{ SpecName("CSS3 Text Decoration", "", "") }}{{ Spec2("CSS3 Text Decoration") }}
-

Extends:

- -
    -
  • the CSS {{ cssxref("text-decoration") }} property by making it a shorthand for the CSS {{ cssxref("text-decoration-line") }}, {{ cssxref("text-decoration-color") }}, and {{ cssxref("text-decoration-style") }} properties. And adds the {{ cssxref("text-decoration-skip") }}, and {{ cssxref("text-underline-position") }} properties.
    • -
- -

Adds:

- -
    -
  • Support for East-Asian-script emphasis marks with the CSS {{ cssxref("text-emphasis") }}, {{ cssxref("text-emphasis-style") }}, {{ cssxref("text-emphasis-color") }}, and {{ cssxref("text-emphasis-position") }} properties.
    • -
  • Support for script shadows with the CSS {{ cssxref("text-shadow") }} property.
    • -
- -

Clarifies:

- -
    -
  • The paint order of the decorations.
    • -
- -

At risk: due to insufficient browser support, standardization of the text-decoration-skip, line positioning rules and the ability to place both emphasis marks and ruby above the same base text may be postponed to the next iteration of this module.

-
- - - - - - - - - - - -
{{ SpecName("CSS3 Fonts", "", "") }}{{ Spec2("CSS3 Fonts") }}
-

Amends the CSS2.1 Font matching algorithm to be closer to what is really implemented.

- -

Adds:

- -
    -
  • Support for downloadable fonts via the CSS {{ cssxref("@font-face") }} at-rule.
    • -
  • The control of the contextual inter-glyph spacing via the CSS {{ cssxref("font-kerning") }} property.
    • -
  • The choice of language-specific glyphs via the CSS {{ cssxref("font-language-override") }} property.
    • -
  • The choice of glyphs with specific OpenType features via the CSS {{ cssxref("font-feature-settings") }} property.
    • -
  • The control of the aspect ratio to use when fallback fonts are selected via the CSS {{ cssxref("font-size-adjust") }} property.
    • -
  • The choice of alternative font faces using the CSS {{ cssxref("font-stretch") }}, {{ cssxref("font-variant-alternates") }}, {{ cssxref("font-variant-caps") }}, {{ cssxref("font-variant-east-asian") }}, {{ cssxref("font-variant-ligatures") }}, {{ cssxref("font-variant-numeric") }}, and {{ cssxref("font-variant-position") }} properties. It also extends the related CSS {{ cssxref("font-variant") }} shorthand property and introduces the {{ cssxref("@font-feature-values") }} at-rule.
    • -
  • The control of the automatic generation of an oblique or bold face when none are found via the CSS {{ cssxref("font-synthesis") }} property.
    • -
-
- - - - - - - - - - - -
{{ SpecName("CSS3 Cascade", "", "") }}{{ Spec2("CSS3 Cascade") }}
-

Adds:

- -
    -
  • The initial, unset values for properties.
    • -
  • The CSS {{ cssxref("all") }} property.
    • -
  • The scoping mechanism.
    • -
- -

Clarifies:

- -
    -
  • Interaction of media-dependent @import statements and style sheet loading requirements.
    • -
-
- - - - - - - - - - - -
{{ SpecName("CSS3 Writing Modes", "", "") }}{{ Spec2("CSS3 Writing Modes") }}
Defines the writing modes of both horizontal and vertical scripts and clarifies how the CSS {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }} properties interact with the new CSS {{ cssxref("text-orientation") }} property, and extends them where needed.
- - - - - - - - - - - -
{{ SpecName("CSS Shapes", "", "") }}{{ Spec2("CSS Shapes") }}
Defines geometric shapes, which can be applied to floats. These shapes describe areas, around which inline content wraps instead of wrapping around the bounding box.
- - - - - - - - - - - -
{{ SpecName("CSS Masks", "", "") }}{{ Spec2("CSS Masks") }}
Defines a way for partially or fully hiding portions of visual elements. It describes how to use another graphical element or image as a luminance or alpha mask.
- -

Modules in the refining phase

- -

Specifications that are deemed to be in the refining phase are already fairly stable. Though changes are still expected, they shouldn't create incompatibilities with current implementations; they should mainly define behavior in edge cases.

- - - - - - - - - - - -
{{ SpecName("Web Animations", "", "") }}{{ Spec2("Web Animations") }}
 
- - - - - - - - - - - -
{{ SpecName("CSS3 Counter Styles", "", "") }}{{ Spec2("CSS3 Counter Styles") }}
 
- - - - - - - - - - - -
{{ SpecName("Compositing", "", "") }}{{ Spec2("Compositing") }}
 
- - - - - - - - - - - -
{{ SpecName("CSS3 Syntax", "", "") }}{{ Spec2("CSS3 Syntax") }}
Clarifies how charsets are determined; minor changes in parsing and tokenization algorithms.
- - - - - - - - - - - -
{{ SpecName("CSS Will Change", "", "") }}{{ Spec2("CSS Will Change") }}
 
- - - - - - - - - - - -
{{ SpecName("CSS3 Transitions", "", "") }}{{ Spec2("CSS3 Transitions") }}
Allows the definition of transitions effects between two properties values by adding the CSS {{ cssxref("transition") }}, {{ cssxref("transition-delay") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-property") }}, and {{ cssxref("transition-timing-function") }} properties.
- - - - - - - - - - - -
{{ SpecName("CSS3 Animations", "", "") }}{{ Spec2("CSS3 Animations") }}
Allows the definition of animations effects by adding the CSS {{ cssxref("animation") }}, {{ cssxref("animation-delay") }},{{ cssxref("animation-direction") }}, {{ cssxref("animation-duration") }}, {{ cssxref("animation-fill-mode") }}, {{ cssxref("animation-iteration-count") }}, {{ cssxref("animation-name") }}, {{ cssxref("animation-play-state") }}, and {{ cssxref("animation-timing-function") }} properties, as well as the {{ cssxref("@keyframes") }} at-rule.
- - - - - - - - - - - -
{{ SpecName("CSS3 Transforms", "", "") }}{{ Spec2("CSS3 Transforms") }}
-

Adds:

- -
    -
  • the support of bi-dimensional transforms to be applied to any element using the CSS {{ cssxref("transform") }} and {{ cssxref("transform-origin") }} properties. The supported transforms are: matrix(), translate(), translateX(), translateY(), scale(), scaleX(), scaleY(), rotate(), skewX(), and skewY().
    • -
  • the support of tri-dimensional transforms to be applied to any element by adding the CSS {{ cssxref("transform-style") }}, {{ cssxref("perspective") }}, {{ cssxref("perspective-origin") }}, and {{ cssxref("backface-visibility") }} properties and extended the {{ cssxref("transform") }} property with the following transforms are: matrix 3d(), translate3d(), translateZ(),  scale3d(), scaleZ(), rotate3d(), rotateX(), rotateY(), rotateZ(), and perspective().
    • -
- -

Note: this specification is a merge of CSS 2D-Transforms, CSS 3D-Transforms and SVG transforms.

-
- - - - - - - - - - - -
{{ SpecName("CSS3 Fragmentation", "", "") }}{{ Spec2("CSS3 Fragmentation") }}
Defines how partitions of a Web page should happen, that is page, column breaks, and widows and orphans handling. -

Adds:

- -
    -
  • Support for defining the behavior of decorations, that is borders and background colors or images, when a box is breaked (at a page, column or line-break) with the CSS {{ cssxref("box-decoration-break") }} property.
    • -
-
- - - - - - - - - - - -
{{ SpecName("CSS3 Text", "", "") }}{{ Spec2("CSS3 Text") }}
-

Extends:

- -
    -
  • the CSS {{ cssxref("text-transform") }} property with the value full-width.
    • -
  • the CSS {{ cssxref("text-align") }} property with the value start, end, start end, and match-parent for a better support of documents with multiple directionalities of text.
    • -
  • the CSS {{ cssxref("text-align") }} property with a {{cssxref("<string>")}} value to align on that character. This is useful to align number on the decimal point.
    • -
  • the CSS {{ cssxref("word-spacing") }} and {{ cssxref("letter-spacing") }} properties with range constraints to control flexibility in justification.
    • -
- -

Adds:

- -
    -
  • Control on how whitespaces are displayed using the CSS {{ cssxref("text-space-collapse") }} and {{ cssxref("tab-size") }} properties.
    • -
  • Control on line breaks and word boundaries using the CSS {{ cssxref("line-break") }}, {{ cssxref("word-break") }}, {{ cssxref("hyphens") }}, {{ cssxref("text-wrap") }}, {{ cssxref("overflow-wrap") }}, and {{ cssxref("text-align-last") }} properties.
    • -
  • Control on how justification is happening, in order to support more type of scripts, using the CSS {{ cssxref("text-justify") }} property.
    • -
  • Control on edge effect using the CSS {{ cssxref("text-indent") }} and {{ cssxref("hanging-punctuation") }} properties.
    • -
-
- -

A few features present in early CSS Text Level 3 draft have being postponed to the next iteration of this module .

- - - - - - - - - - - -
{{ SpecName("CSS3 Variables", "", "") }}{{ Spec2("CSS3 Variables") }}
Defines a mechanism allowing to define variables in CSS.
- - - - - - - - - - - -
{{ SpecName("Compositing", "", "") }}{{ Spec2("Compositing") }}
 
- -

Modules in the revising phase

- -

Modules that are in the revising phase are much less stable than those in the refining phase. Often the syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntaxes are tested and often implemented.

- - - - - - - - - - - -
{{ SpecName("CSS3 Basic UI", "", "") }}{{ Spec2("CSS3 Basic UI") }}
-

Adds:

- -
    -
  • The ability to tweak the box model using the CSS {{ cssxref("box-sizing") }} property.
    - At risk: due to insufficient browser support, standardization of the padding-box value may be postponed to the next iteration of this module .
    • -
  • Allow the styling of forms according their content using the CSS {{ cssxref(":indeterminate") }}, {{ cssxref(":default") }}, {{ cssxref(":valid") }}, {{ cssxref(":invalid") }}, {{ cssxref(":in-range") }}, {{ cssxref(":out-of-range") }}, {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":read-only") }}, and {{ cssxref(":read-write") }} pseudo-classes and the {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} pseudo-elements.
    - At risk: due to insufficient browser support, standardization of the pseudo-elements {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} may be postponed to the next iteration of this module .
    • -
  • Support for icons, defined by the CSS {{ cssxref("icon") }} property simultaneously with the new icon value of the CSS {{ cssxref("content") }} property.
    - At risk: due to insufficient browser support, standardization of the {{ cssxref("icon") }} property and the icon value may be postponed to CSS4.
    • -
  • Support for the CSS {{ cssxref("outline-offset") }} property giving more control on the position of the outline.
    • -
  • Support for the CSS {{ cssxref("resize") }} property allowing Web authors to control if and how elements should be resized.
    • -
  • Support for the CSS {{ cssxref("text-overflow") }} property defining how text overflows, if needed.
    - At risk: due to insufficient browser support, the 2-value syntax of this property as well as the support for {{cssxref("<string>")}} values may be postponed to the next iteration of this module .
    • -
  • The ability to define the hotspot of a cursor as well as the new none, context-menu, cell, vertical-text, alias, copy, no-drop, not-allowed, nesw-resize, nwse-resize, col-resize, row-resize, all-scroll, zoom-in, zoom-out, extending the {{ cssxref("cursor") }} property.
    • -
  • The ability to specify the sequential navigation order (that is the tabbing order ) using the CSS {{ cssxref("nav-index") }}, {{ cssxref("nav-up") }}, {{ cssxref("nav-right") }}, {{ cssxref("nav-left") }}, {{ cssxref("nav-down") }} properties.
    - At risk: due to insufficient browser support, standardization of the navigation properties may be postponed to the next iteration of this module .
    • -
  • The ability to control the usage of an IME editor, using the CSS {{ cssxref("ime-mode") }} property.
    - At risk: due to insufficient browser support, standardization of the {{ cssxref("ime-mode") }} property may be postponed to the next iteration of this module .
    • -
-
- -

An early list of what could be in the next iteration of the CSS Basic User Interface Module is available.

- - - - - - - - - - - -
{{ SpecName("CSS3 Grid", "", "") }}{{ Spec2("CSS3 Grid") }}
Add a grid layout to the CSS display property and several new CSS properties to control it: {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid-auto-position")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-template")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template-rows")}}, and {{cssxref("grid-template-columns")}}.
- - - - - - - - - - - -
{{ SpecName("CSS3 Box Alignment", "", "") }}{{ Spec2("CSS3 Box Alignment") }}
 
- - - - - - - - - - - -
{{ SpecName("CSS3 Paged Media", "", "") }}{{ Spec2("CSS3 Paged Media") }}
 
- - - - - - - - - - - -
{{ SpecName("CSSOM View", "", "") }}{{ Spec2("CSSOM View") }}
 
- - - - - - - - - - - -
{{ SpecName("CSS4 Selectors", "", "") }}{{ Spec2("CSS4 Selectors") }}
 
- -

Modules in the exploring phase

- - - - - - - - - - - -
{{ SpecName("CSS4 Images", "", "") }}{{ Spec2("CSS4 Images") }}
-

Extends:

- -
    -
  • the image() functional notation to describe the directionality of the image (rtl or ltr), allowing for bidi-sensitive images.
    • -
  • the {{ cssxref("image-orientation") }} property by adding the keyword from-image, allowing to follow EXIF data stored into images to be considered.
    • -
- -

Adds:

- -
    -
  • the image-set() functional notation to allow the definition to equivalent images at different resolution allowing for resolution-negotiated selection of images.
    • -
  • the element() functional notation allowing the use of part of the page as image.
    • -
  • the cross-fade() functional notation allowing to refer to intermediate images when transitioning between two images and defines the interpolation between two images.
    • -
  • the conic-gradient() and repeating-conic-gradient() functional notation describing a new type of gradient.
    • -
  • the {{cssxref("image-rendering")}} property that allow to define how resize of the object should be handled.
    • -
-
- - - - - - - - - - - -
{{ SpecName("CSS3 Device", "", "") }}{{ Spec2("CSS3 Device") }}
Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.
- - - - - - - - - - - -
{{ SpecName("CSS3 GCPM", "", "") }}{{ Spec2("CSS3 GCPM") }}
Adds the ability to tailor printed version of a document by allowing to control header, footer but also references tables like indexes or tables of content.
- - - - - - - - - - - -
{{ SpecName("CSS Exclusions", "", "") }}{{ Spec2("CSS Exclusions") }}
Extends the floats mechanism to define exclusion regions in any positioning scheme. Adds the notion of shapes, in which content must flows.
- - - - - - - - - - - -
{{ SpecName("CSS3 Lists", "", "") }}{{ Spec2("CSS3 Lists") }}
Extends the list counter mechanism so that list markers can be styled and Web developers can define new list counter schemes.
- - - - - - - - - - - -
{{ SpecName("CSS3 Regions", "", "") }}{{ Spec2("CSS3 Regions") }}
Defines a new mechanism allowing content to flow across, eventually non-contiguous, multiple areas called regions.
- - - - - - - - - - - -
{{ SpecName("CSS3 Device", "", "") }}{{ Spec2("CSS3 Device") }}
Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.
- - - - - - - - - - - -
{{ SpecName("Filters 1.0", "", "") }}{{ Spec2("Filters 1.0") }}
 
- - - - - - - - - - - -
{{ SpecName("CSS3 Template", "", "") }}{{ Spec2("CSS3 Template") }}
 
- - - - - - - - - - - -
{{ SpecName("CSS3 Sizing", "", "") }}{{ Spec2("CSS3 Sizing") }}
 
- - - - - - - - - - - -
{{ SpecName("CSS Line Grid", "", "") }}{{ Spec2("CSS Line Grid") }}
 
- - - - - - - - - - - -
{{ SpecName("CSS3 Positioning", "", "") }}{{ Spec2("CSS3 Positioning") }}
 
- - - - - - - - - - - -
{{ SpecName("CSS3 Ruby", "", "") }}{{ Spec2("CSS3 Ruby") }}
 
- - - - - - - - - - - -
{{ SpecName("CSSOM", "", "") }}{{ Spec2("CSSOM") }}
 
- - - - - - - - - - - -
{{ SpecName("CSS3 Overflow", "", "") }}{{ Spec2("CSS3 Overflow") }}
 
- - - - - - - - - - - -
{{ SpecName("CSS3 Font Loading", "", "") }}{{ Spec2("CSS3 Font Loading") }}
 
- - - - - - - - - - - -
{{ SpecName("CSS3 Display", "", "") }}{{ Spec2("CSS3 Display") }}
 
- - - - - - - - - - - -
{{ SpecName("CSS Scope", "", "") }}{{ Spec2("CSS Scope") }}
 
- - - - - - - - - - - -
{{ SpecName("CSS4 Media Queries", "", "") }}{{ Spec2("CSS4 Media Queries") }}
 
- - - - - - - - - - - -
{{ SpecName("CSS Non-element Selectors", "", "") }}{{ Spec2("CSS Non-element Selectors") }}
 
- - - - - - - - - - - -
{{ SpecName("Geometry Interfaces", "", "") }}{{ Spec2("Geometry Interfaces") }}
 
- - - - - - - - - - - -
{{ SpecName("CSS3 Inline", "", "") }}{{ Spec2("CSS3 Inline") }}
 
- -

Modules in the rewriting phase

- -

Modules that are in the rewriting phase are outdated and require to be rewritten. The syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntaxes are tested and often implemented.

- - - - - - - - - - - -
{{ SpecName("CSS3 Box", "", "") }}{{ Spec2("CSS3 Box") }}
 
- - - - - - - - - - - -
{{ SpecName("CSS3 Content", "", "") }}{{ Spec2("CSS3 Content") }}
 
- - - - - - - - - - - -
{{ SpecName("CSS3 Inline Layout", "", "") }}{{ Spec2("CSS3 Inline Layout") }}
 
- -

 

diff --git a/files/id/archive/index.html b/files/id/archive/index.html deleted file mode 100644 index 6361867424..0000000000 --- a/files/id/archive/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Arsipkan konten usang -slug: Archive -translation_of: Archive ---- -

Di sini, di MDN, kami mencoba untuk menghindari penghapusan konten secara langsung yang mungkin berguna bagi orang-orang yang menargetkan platform, sistem operasi, dan browser lawas. Mungkin target pemirsa Anda adalah orang-orang yang menggunakan perangkat keras lama, misalnya, dan tidak dapat melakukan upgrade ke browser terbaru dan terbaik. Atau untuk "alasan", perusahaan Anda diharuskan menggunakan perangkat lunak yang sangat tua dan Anda perlu membangun konten Web yang berjalan pada perangkat lunak itu. Atau mungkin Anda hanya ingin tahu tentang sejarah fitur usang atau API, dan bagaimana cara kerjanya.

- -

Ada banyak alasan dokumentasi yang lebih tua bisa bermanfaat. Jadi, kami telah menetapkan area ini untuk mengarsipkan dokumentasi yang lebih tua. Materi di zona Konten yang Diarsipkan ini seharusnya tidak digunakan untuk membuat situs Web baru atau aplikasi untuk peramban modern. Itu hanya untuk referensi sejarah saja.

- -
-

Catatan untuk penulis: Kita perlu mencoba untuk menjaga bagian halaman di sini diatur bukan semua dibuang ke dalam satu folder besar. Cobalah untuk membuat bagan pohon  untuk kategori materi. Selain itu, hanya memindahkan halaman di sini yang sangat usang. Jika ada orang yang secara realistis memerlukan informasi dalam produk yang hidup, mungkin tidak tepat untuk memindahkannya ke sini. Secara umum, sebaiknya Anda mendiskusikannya di saluran MDN Web Docs sebelum memindahkan konten di sini.

-
- -

{{SubpagesWithSummaries}}

- - - -

{{ListSubpages("/en-US/docs/Archive", 2, 0, 1)}}

diff --git a/files/id/archive/meta_docs/index.html b/files/id/archive/meta_docs/index.html deleted file mode 100644 index 55e2f91374..0000000000 --- a/files/id/archive/meta_docs/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Arsip MDN "meta-documentation" -slug: Archive/Meta_docs -tags: - - Archive - - MDN -translation_of: Archive/Meta_docs ---- -

Di sini Anda akan menemukan arsip "meta-documentation"; Yaitu dokumentasi tentang bagaimana menulis dokumentasi tentang MDN. Artikel di sini sudah usang dan seharusnya tidak lagi direferensikan; Kami mempertahankannya di sini untuk referensi sementara kami memigrasikan beberapa konten ke tempat baru, namun sangat sedikit hal ini berguna.

- -

{{LandingPageListSubpages}}

diff --git a/files/id/archive/mozilla/index.html b/files/id/archive/mozilla/index.html deleted file mode 100644 index 132253aacf..0000000000 --- a/files/id/archive/mozilla/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Archived Mozilla and build documentation -slug: Archive/Mozilla -translation_of: Archive/Mozilla ---- -

In progress. These articles are archived, obsolete documents about Mozilla, Gecko, and the process of building Mozilla projects.

- -

{{SubpagesWithSummaries}}

diff --git a/files/id/archive/mozilla/xul/index.html b/files/id/archive/mozilla/xul/index.html deleted file mode 100644 index 17aa6ed66c..0000000000 --- a/files/id/archive/mozilla/xul/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: XUL -slug: Archive/Mozilla/XUL -tags: - - NeedsTranslation - - TopicStub - - XUL -translation_of: Archive/Mozilla/XUL ---- -
XUL Tutorial
-A guided tutorial that will help you get started with XUL, originally from XULPlanet.
- -
-

XUL (XML User Interface Language) is Mozilla's XML-based language for building user interfaces of applications like Firefox. The term XUL is sometimes used to refer to the whole Mozilla platform (e.g. XUL applications are applications using XUL and other components of the platform).

- -

XUL Controls lists some of the common controls provided by XUL.

-
- - - - - - - - -
-

Documentation

- -
-
XUL Tutorial
-
A guided tutorial that will help you get started with XUL, originally from XULPlanet.
-
XUL Reference
-
XUL elements, attributes, properties, methods, and event handlers.
-
XUL Controls
-
A quick list of all of the available XUL controls.
-
The Joy of XUL
-
Describes the key features and components of XUL.
-
Menus and Popups Guide
-
A guide on using menus and popup panels.
-
Template Guide
-
A detailed guide on XUL templates, which is a means of generating content from a datasource.
-
Drag and Drop
-
How to perform drag and drop operations.
-
- -
-
XUL Periodic Table
-
This collection of XUL demos was available as a web page, but can no longer be viwed in Firefox since support for Remote XUL was disabled.  There is a XULRunner application containing the XUL Periodic Table which can be opened with Gecko based browsers. You can get it here. See: XULRunner_tips#Using_Firefox_3_to_run_XULRunner_applications for instructions on running XULRunner apps in Firefox.
-
Changes to XUL
-
New XUL features and changes to existing features are included in the Firefox developer release notes.
-
- -

View All...

- 		-

Community

- - - -

Tools

- - - -

View All...

- - - - -
- -

 

diff --git a/files/id/archive/mozilla/xul/international_characters_in_xul_javascript/index.html b/files/id/archive/mozilla/xul/international_characters_in_xul_javascript/index.html deleted file mode 100644 index d3ddd60359..0000000000 --- a/files/id/archive/mozilla/xul/international_characters_in_xul_javascript/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: International characters in XUL JavaScript -slug: Archive/Mozilla/XUL/International_characters_in_XUL_JavaScript -translation_of: Archive/Mozilla/XUL/International_characters_in_XUL_JavaScript ---- -

Introduction

-

Gecko 1.8, as used in Firefox 1.5 and other applications, added support for non-ASCII characters in JavaScript files loaded from XUL files.

-

This means that such script files can use any character from virtually any language of the world. For example, they can contain a line:

-
var text = "Ein schönes Beispiel eines mehrsprachigen Textes: 日本語";
-
-

This mixes German and Japanese characters.

-

Earlier versions always interpreted JS files loaded from XUL as ISO-8859-1 (Latin-1), in both local and remote cases. Unicode escapes, as discussed below, have always worked.

-

How the character encoding is determined in Gecko 1.8 and later

-

When the JavaScript file is loaded from a chrome:// URL, a Byte Order Mark ({{todo}})({{ interwiki('wikipedia', 'Byte_Order_Mark', 'BOM') }}) is used to determine the character encoding of the script. Otherwise, the character encoding will be the same as the one used by the XUL file (which can be specified using an encoding attribute in the <?xml?> tag). By default this will use UTF-8, which can represent virtually all characters in the world.

-

If the script file is loaded via HTTP, the HTTP header can contain a character encoding declaration as part of the Content-Type header, for example:

-
Content-Type: application/javascript; charset=UTF-8
-
-

If no charset parameter is specified, the same rules as above apply.

-

Cross-version compatibility

-

If you want the same code to work in both Gecko 1.8 and earlier versions, you must limit yourself to ASCII. However, you can use unicode escapes – the earlier example rewritten using them would be:

-
var text = "Ein sch\u00F6nes Beispiel eines mehrsprachigen Textes: \u65E5\u672C\u8A9E";
-
-

An alternative might be to use property files via {{interface("nsIStringBundle")}} or the XUL <stringbundle> element; this would allow for localization of the XUL. This can not be done in XUL files loaded from the web, only in privileged code, e.g. in extensions.

diff --git a/files/id/archive/mozilla/xul/school_tutorial/index.html b/files/id/archive/mozilla/xul/school_tutorial/index.html deleted file mode 100644 index 4ae723e85a..0000000000 --- a/files/id/archive/mozilla/xul/school_tutorial/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: XUL School Tutorial -slug: Archive/Mozilla/XUL/School_tutorial -tags: - - Add-ons - - Extensions - - NeedsTranslation - - References - - TopicStub - - Tutorials - - XUL -translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School ---- -

XUL School is a comprehensive add-on development tutorial, focusing on Firefox extension development. It is recommended that you read through all of it at least once. While Firefox changes rapidly, the content in this tutorial should be up to date and valid.

-
-
Introduction
-
-
Basic functionality
-
-
Intermediate functionality
-
-
Advanced topics
-
-
Appendices
-
-
-

The XUL School project was developed by Appcoast (formerly Glaxstar). The project is now published here following its sharing licenses. Its contents have been modified from the original source as necessary.

diff --git a/files/id/archive/mozilla/xul/school_tutorial/perkenalan/index.html b/files/id/archive/mozilla/xul/school_tutorial/perkenalan/index.html deleted file mode 100644 index 5ce760d1be..0000000000 --- a/files/id/archive/mozilla/xul/school_tutorial/perkenalan/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Perkenalan -slug: Archive/Mozilla/XUL/School_tutorial/Perkenalan -translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Introduction ---- -
- {{Next("XUL_School/Getting_Started_with_Firefox_Extensions")}}
-

Selamat datang di Tutorial Sekolah XUL !

-

Tutorial ini dimaksudkan untuk menjadi batu loncatan yang akan mengubah Anda menjadi seorang pengembang ekstensi Firefox profesional dalam waktu singkat . Kami telah dituangkan tahun pengalaman XUL ke dalamnya , menyediakan banyak solusi untuk masalah pengembang ekstensi pada umumnya.

-

XUL School was created by Appcoast (formerly Glaxstar), one of the few companies dedicated to building high-quality Firefox extensions. A team of over a dozen XUL developers conformed Glaxstar at the time this tutorial was created, and the combined experiences of years creating Firefox extensions are reflected here.

-

With this tutorial you'll learn how to develop Firefox extensions. You'll learn how to quickly do the most common tasks in extension development, comparing several different approaches to solve them. In most cases we'll provide code samples that you can easily copy and adapt to your needs, as well as some working example extensions. The tutorial aims to be as brief as possible, often falling back on Mozilla documentation for more detailed information. You can think of it as a quick guide to the expansive world that is the Mozilla platform. Most links in this documentation are meant to be clicked and read.

-

We'll start with a brief introduction to some key concepts, in case you're not familiar with Mozilla and Firefox.

-

Mozilla and Firefox

-

The term Mozilla can be used to refer to several concepts: the Mozilla project, the Mozilla Foundation, the Mozilla Corporation and the old Mozilla browser. Even Firefox is sometimes referred to as "Mozilla". If you're unfamiliar with these terms, it's good that you take some time and learn a little about Mozilla. This will help you understand the culture that surrounds the Mozilla community.

-

Mozilla has spawned several products and projects, the most notable being the Mozilla Firefox web browser. Firefox is one of the most successful open source projects in history, combining the openness, standards-compliance and sophistication of open source with the focus on user experience and powerful outreach more commonly seen in less open companies.

-

Version 1.0 of Firefox was released in November 2004, version 2.0 in October 2006, and version 3.0 in June 2008. This tutorial was written after Firefox 3 was released, and has been updated with time. While most of it should still work for creating extensions Firefox 3 (and even Firefox 2), it is strongly recommended that you aim to support modern Firefox versions, to encourage users to stay up to date with security fixes. A release that is more than 6 months old is likely vulnerable to published security bugs.

-

Firefox and other Mozilla applications can be seen as composed of two different parts: a user interface layer that is distinct for each project, and a common platform on top of which the interface layer is built. The user interface is built with technology known as XUL, and the platform is known as XULRunner.

-

XUL

-

XUL (pronounced "zool") is one of many technologies used for creating Mozilla-based products and extensions. It is only one part of the development landscape, but given that it's practically exclusive to Mozilla, it tends to be used to identify all Mozilla-related development. You'll sometimes read terms like "XUL applications" and "XUL extensions", but rarely will they refer to projects that are exclusively built with XUL. It usually means that the projects were built using Mozilla technologies. Even this project, called XUL School, covers several other technologies such as JavaScript, CSS, XBL and XPCOM.

-

XULRunner

-

XULRunner includes the Gecko rendering engine, the Necko networking library, and several other components that provide OS-independent file management, accessibility, and localization, among others. It is this very powerful platform that has allowed such a fast growth of the development community surrounding Mozilla and Firefox.

-

XULRunner is available in binary form at the XULRunner page, and it is the base for several projects, such as Songbird, Miro and Eudora. There's a very comprehensive list of XULRunner applications in the XULRunner Hall of Fame.

-

Gecko

-

The Gecko engine is the part of Firefox used to render web pages and its own user interface. You can identify the level of compatibility of web standards in Gecko-based browsers looking at their User Agent string, which should include the Gecko version. Gecko versions are somewhat independent from Firefox versions, and you can see a mapping of Firefox versions and Gecko versions at the Gecko page. The User Agent String for Firefox at the time of this writing (in US English, Mac OS X) is:

-

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:7.0.1) Gecko/20100101 Firefox/7.0.1

-

The highlighted section is the Gecko version: 7.0.1. You can read and copy the user agent string of any Firefox window, choosing "Help > Troubleshooting Information" from the main menu.

-

On to the Tutorial

-

With the basic concepts out of the way, we can now get right into extension development. You are probably still wondering what exactly is an extension, what can it do, and how can you make them. Well, this whole tutorial is devoted to explaining that to you.

-

Welcome to the world of extension development. Now let's get to it.

-
- {{Next("XUL_School/Getting_Started_with_Firefox_Extensions")}}
-

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/id/archive/mozilla/xul/school_tutorial/the_essentials_of_an_extension/index.html b/files/id/archive/mozilla/xul/school_tutorial/the_essentials_of_an_extension/index.html deleted file mode 100644 index 9fa34889f3..0000000000 --- a/files/id/archive/mozilla/xul/school_tutorial/the_essentials_of_an_extension/index.html +++ /dev/null @@ -1,344 +0,0 @@ ---- -title: The Essentials of an Extension -slug: Archive/Mozilla/XUL/School_tutorial/The_Essentials_of_an_Extension -translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/The_Essentials_of_an_Extension ---- -

{{ PreviousNext("XUL_School/Getting_Started_with_Firefox_Extensions", "XUL_School/Setting_Up_a_Development_Environment") }}

-

The install.rdf File

-

In the last section we looked at the contents of the Hello World extension. Now we'll look into its files and code, starting with the install.rdf file. You can open it with any text editor.

-

The file is formatted in a special flavor of XML called RDF. RDF used to be the central storage mechanism for Firefox, but it is now being replaced for a simpler database system. We'll discuss both of these storage systems further ahead in the tutorial.

-

Now let's look at the important parts of the file.

-
-
- 
<em:id>helloworld@xulschool.com</em:id>
-
-
-

This is the unique identifier for the extension. Firefox needs this to distinguish your extension from other extensions, so it is required that you have an ID that is unique.

-

There are two accepted standards for add-on ids. One is the email-like format in the Hello World example, which should be something like <project-name>@<yourdomain>. The other standard practice is to use a generated UUID string, which is extremely unlikely to be duplicated. Unix-based systems have a command line tool called uuidgen that generates UUIDs. There are also downloadable tools for all platforms that generate them. The enclosing brackets are just notation, and they're just common practice. As long as your id has some uniqueness to it, it's OK to use either form.

-
-
- 
<em:name>XUL School Hello World</em:name>
-<em:description>Welcome to XUL School!</em:description>
-<em:version>0.1</em:version>
-<em:creator>Appcoast</em:creator>
-<em:homepageURL>https://developer.mozilla.org/en/XUL_School</em:homepageURL>
-
-
-

This is the data that is displayed before and after the extension is installed, that you can see in the Add-ons Manager. There are many other tags that can be added, for contributors and translators. The full specification of the install.rdf file has all the details.

-

Since extensions can be translated to multiple languages, it is often necessary to translate the extension's description, or even its name. A localized description and name can be added with the following code:

-
-
- 
<em:localized>
-  <Description>
-    <em:locale>es-ES</em:locale>
-    <em:name>XUL School Hola Mundo</em:name>
-    <em:description>Bienvenido a XUL School!</em:description>
-  </Description>
-</em:localized>
-
-
-

The es-ES locale string indicates that this is the Spanish (es) localization for Spain (ES). You can add as many <em:localized> sections as you need. For Firefox 2, localizing this file is a little more complicated. We'll discuss localization further ahead in this section.

-
-
- 
<em:type>2</em:type>
-
-
-

This specifies that the add-on being installed is an extension. You can read about different possible types in the install.rdf specification.

-
-
- 
<em:targetApplication>
-  <Description>
-    <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
-    <em:minVersion>4.0</em:minVersion>
-    <em:maxVersion>10.*</em:maxVersion>
-  </Description>
-</em:targetApplication>
-
-
-
-

This node specifies the target application and target versions for the extension, specifically Firefox, from version 4 up to version 10. The UUID is Firefox's unique ID. Other Mozilla and Mozilla-based applications such as Thunderbird and Seamonkey have their own. You can have an extension that works on multiple applications and versions. For example, if you create a Firefox extension, it would normally take little effort to port it to SeaMonkey, which has very similar features and UI.

-

The min and max version specify the version range in which the extension can be installed. Here's more about the version format. If the application or version range don't match, you won't be allowed to install the extension, or the extension will be installed in a disabled state. Users can disable version checks through preferences or installing add-ons like the Add-on Compatibility Reporter. Beginning with Firefox 11, add-ons will default to compatible and Firefox will mostly ignore the version range. Testing your add-ons with every Firefox version is always recommended, though.

-

This is the information Firefox and other Mozilla applications need to install an add-on. Any errors or missing information will cause the installation process to fail, or the extension to be installed in a disabled state.

-

The chrome.manifest File

-
-

Chrome is the set of user interface elements of the application window that are outside of a window's content area. Toolbars, menu bars, progress bars, and window title bars are all examples of elements that are typically part of the chrome.

-
-

Taken from Chrome Registration.

-

In other words, the chrome is everything you see in Firefox. All Firefox windows can be seen as having two parts: (1) the chrome and (2) possibly a content area, like the one that displays web pages in a Firefox tab. Windows like the Downloads window are pure chrome. Most of the code for an extension resides in the chrome folder, just like in the Hello World example.

-

As we saw in the directory structure of the unpacked extension, the chrome is composed of 3 sections: content, locale and skin. The 3 are necessary for most extensions. If we open the chrome.manifest file (again, any text editor will do), we see that the same 3 sections are mentioned:

-
-
- 
content   xulschoolhello              content/
-skin      xulschoolhello  classic/1.0 skin/
-locale    xulschoolhello  en-US       locale/en-US/
-
-
-
-

The chrome.manifest file tells Firefox where to look for chrome files. The text is spaced to look like a table, but that is not necessary. The parser ignores repeated spaces.

-

The first word in a line tells Firefox what it is that is being declared (content, skin, locale, or others mentioned later on). The second is the package name, which we will explain shortly.

-

Skin and locale packages have a third value to specify what locale or what skin they are extending. There can be multiple skin and locale entries relating to different skins and locales. The most common case is having one skin entry for the global skin, classic/1.0, and multiple locale entries, one for each translation. Finally, the location is specified.

-

There are some additional options that can be included in the entries of a chrome.manifest file. They are documented in the Chrome Registration page. Notably, we can have entries that are OS-specific. This is important because the appearance of the browser is very different for each operating system. If our extension needed to look differently on different systems, we could change the manifest file so that it looks like this:

-
-
- 
content   xulschoolhello              content/
-skin      xulschoolhello  classic/1.0 skin/unix/
-skin      xulschoolhello  classic/1.0 skin/mac/ os=Darwin
-skin      xulschoolhello  classic/1.0 skin/win/ os=WinNT
-locale    xulschoolhello  en-US       locale/en-US/
-
-
-
-

This way we can have separate skins for Windows, Mac OS X, and Linux (plus other unix-like systems), each defined in a separate directory. Since most other systems are Unix-based, the "unix" skin is the default, with no flags.

-

The Chrome

-

As mentioned earlier, the chrome is composed of 3 sections: content, locale and skin. The content is the most important section, holding user interface (XUL) and script (JS) files. The skin section has the files that define most of the look and feel of the UI (using CSS and images, just like web pages). Finally, the locale section holds all text used in the extension, in DTD and properties files. This division allows other developers to create themes that replace skins, and translators to create localizations in different languages, all of this without having to change your extension or your code. This gives Firefox extensions a great deal of flexibility.

-

Chrome files are accessed through the chrome protocol. This is what a chrome URI looks like:

-
-
- 
chrome://packagename/section/path/to/file
-
-
-

So, for instance, if I want to access the file browserOverlay.xul in the extension, the chrome URI would be chrome://xulschoolhello/content/browserOverlay.xul.

-

If you have too many files in the content and you want to organize them in subdirectories, there's nothing you need to change in chrome.manifest, all you need is to add the right path after content in the URI.

-

Skin and locale files work in the same way, and you don't need to specify skin names or locale names. So, to access the DTD file in the Hello World extension, the chrome path is chrome://xulschoolhello/locale/browserOverlay.dtd. Firefox knows what locale to look for.

-

Here's an interesting experiment. Open a new Firefox tab, type chrome://mozapps/content/downloads/downloads.xul on your location bar and press ENTER. Surprised? You just opened the Downloads window in a Firefox tab! You can access any chrome file by just typing its URI in the location bar. This can come in handy if you want to inspect script files that are part of Firefox, other extensions, or your own. Most of these files are opened as text files, with the exception of XUL files, which are executed and displayed like you would normally see them on a window.

-

Content

-

There are 2 files in the content directory. Let's look at the XUL file first.

-

XUL files are XML files that define the user interface elements in Firefox and Firefox extensions. XUL was inspired by HTML, so you'll see many similarities between the two. However, XUL is also an improvement over HTML, having learned from many of the mistakes made during the evolution of HTML. XUL allows you to create richer and more interactive interfaces than the ones you can create with HTML, or at least XUL makes it easier.

-

XUL files usually define one of two things: windows or overlays. The file you opened before, downloads.xul, has the code that defines the Downloads window. The XUL file included in the Hello World extension is an overlay. An overlay extends an existing window, adding new elements to it or replacing some of the elements in it. The line that we skipped in the chrome.manifest file states that this XUL file is an overlay for the main browser window:

-
-
- 
overlay chrome://browser/content/browser.xul  chrome://xulschoolhello/content/browserOverlay.xul
-
-
-

With this line, Firefox knows that it needs to take the contents of browserOverlay.xul and overlay it on the main browser window, browser.xul. You can declare overlays for any window or dialog in Firefox, but overlaying the main browser window is the most common case by far.

-

Now let's look at the contents of our XUL file. We'll skip the first few lines because they relate to skin and locale, and we'll cover them later.

-
-
- 
<overlay id="xulschoolhello-browser-overlay"
-  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
-
-

The root element in the file is an overlay. Other XUL documents use the window or dialog tag. The element has a unique id, which you should have on most elements in your XUL. The second attribute is the namespace, which is something you should always define in your XUL root element. It says that this node and all child nodes are XUL. You only need to change namespace declarations when you mix different types of content in the same document, such as XUL with HTML or SVG.

-
-
-
- You may have noticed the naming we use on several places, such as the id xulschoolhello-browser-overlay. This is the namespacing standard that we use to avoid conflicts with Firefox and other extensions, as well as making some development tasks easier. We namespace all ids and style classes in overlay elements because they will be mixed with other elements in the main browser window. If we used generic ids like container or input, they will likely conflict with ids used within Firefox, or with ids from other extension overlays. Using namespaces minimizes compatibility problems with other extensions. We use camel casing for file names, and all lower case with dashes for element ids and CSS style class names, but you're free to use your own system.
-
-
-
-
- 
<script type="application/x-javascript"
-  src="chrome://xulschoolhello/content/browserOverlay.js" />
-
-
-

Just like in HTML, this includes a JavaScript script file. You can have as many script elements in a XUL document as you need. We'll look into its code later.

-
-
-
- You also probably noticed how we format our code, and wonder about the rules we follow. Our general rule on line length is not having lines longer than 80 characters. This feels very restrictive, specially with XML files, but the number was chosen to allow pretty much any text editor to handle these files easily. Even old command line editors work well with files that cut their lines at 80 characters. The tabulation is very straightforward: 2 blank space indents. We never use actual tab characters, with the exception of Makefiles, which will be covered later on. Most of our coding standards are based on Mozilla's or other known and used standards.
-
-
-

 We'll skip some code that is covered in the locale section, moving on to the most important part of the content:

-
-
- 
<menubar id="main-menubar">
-  <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;"
-    accesskey="&xulschoolhello.helloMenu.accesskey;" insertafter="helpMenu">
-    <menupopup>
-      <menuitem id="xulschoolhello-hello-menu-item"
-        label="&xulschoolhello.hello.label;"
-        accesskey="&xulschoolhello.helloItem.accesskey;"
-        oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" />
-    </menupopup>
-  </menu>
-</menubar>
-
-<vbox id="appmenuSecondaryPane">
-  <menu id="xulschoolhello-hello-menu-2" label="&xulschoolhello.hello.label;"
-    accesskey="&xulschoolhello.helloMenu.accesskey;"
-    insertafter="appmenu_addons">
-    <menupopup>
-      <menuitem id="xulschoolhello-hello-menu-item-2"
-        label="&xulschoolhello.hello.label;"
-        accesskey="&xulschoolhello.helloItem.accesskey;"
-        oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" />
-    </menupopup>
-  </menu>
-</vbox>
-
-
-
-

This is the code that adds the Hello World menu to the browser window.

-

There are two similar code blocks, because in modern versions of Firefox, particularly on Windows, a single Firefox menu button is presented, with simplified menu options, rather than an extensive menu bar. The second code block covers the common menu button case; the first code block covers all other cases. Check Menu Bar under the Options menu of the menu button to toggle display of the classic menu on Windows and some Linux distributions.

-

In order to write this code, we needed some knowledge of the XUL code in browser.xul. We needed to know that the id of the right pane in the unified menu is appmenuSecondaryPane. We're adding a menu of our own, and telling Firefox to add it in that pane, right after the Add-ons item. That's the purpose of the attribute:

-
-
- 
insertafter="appmenu_addons"
-
-
-
-

appmenu_addons is the id of the menu element that corresponds to the Add-ons menu item in the main menu. We'll see later how we can find out things like the ids of browser elements, but for now let's look at the elements that compose the Hello World menu.

-

For the classic menu, we added the Hello World menu right in the "root" of the menu so that it would be very easy for you to spot it, but this is not a recommended practice. Imagine if all extensions added menus to the top menu; having a few extensions would make it look like an airplane dashboard, full of knobs and switches. In the case of the unified menu, things are a little more difficult due to lack of options. If your menu item fits in the Web Developer section, it is recommended that you add it there. Otherwise, the root menu might be your only recourse.

-

One recommended location for menus in the classic menu vase is under the Tools menu, so the code should really look like this:

-
-
- 
<menupopup id="menu_ToolsPopup">
-  <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;"
-    accesskey="&xulschoolhello.helloMenu.accesskey;"
-    insertbefore="devToolsEndSeparator">
-    <menupopup>
-      <menuitem id="xulschoolhello-hello-menu-item"
-        label="&xulschoolhello.hello.label;"
-        accesskey="&xulschoolhello.helloItem.accesskey;"
-        oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" />
-    </menupopup>
-  </menu>
-</menupopup>
-
-
-
-

We're overlaying the menu that is deeper into the XUL tree, but it doesn't matter because all we need is the id of the element we want to overlay. In this case it is the menupopup element that's inside of the Tools menu element. The insertbefore attribute tells Firefox to add the menu at the bottom of the dev tools section, above its end separator. We'll discuss more about menus later on in the tutorial.

-

Now let's look at the actual code:

-
-
- 
oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);"
-
-
-
-

This attribute defines an event handler. The command event is the most frequently used in Firefox, since it corresponds to the main action for most UI elements. The value of the attribute is JavaScript code that invokes a function. This function is defined in the JS file that was included with the script tag. The JS function will be called once the user clicks on the menu item in the Hello World menu. All event handlers define a special object named event, which is usually good to pass as an argument to the function. Event handlers are explained in greater depth further ahead.

-

Now let's look at the JavaScript file and see what's going on when the event is fired.

-
-
- 
/**
- * XULSchoolChrome namespace.
- */
-if ("undefined" == typeof(XULSchoolChrome)) {
-  var XULSchoolChrome = {};
-};
-
-
-

The XULSchoolChrome namespace is defined. All objects and variables we define in this JavaScript are global, meaning that scripts in Firefox and other extensions can see them and interact with them. This also means that if we define an object called MenuHandler or some other generic name, it's likely going to conflict with an existing object. What we do here is define a single global object: XULSchoolChrome. Now we know that all of our objects are inside this object, which is unlikely to be duplicated or overwritten by other extensions.

-

You can read more about the typeof operator. If you're unfamiliar with JavaScript or this particular syntax, initializing an object as {} is the equivalent of initializing it to new Object().

-
-
- 
/**
- * Controls the browser overlay for the Hello World extension.
- */
-XULSchoolChrome.BrowserOverlay = {
-
-
-

Finally, BrowserOverlay is our object. Naming and referencing  objects in such a long and verbose manner can feel uncomfortable at first, but it's worth the cost.

-
-
-
- We use Javadoc style comments on all namespaces, objects and object members. This is a similar standard to the one used in Mozilla code, and some tools can generate documentation automatically from Javadoc.
-
-
-
-
- 
sayHello : function(aEvent) {
-  let stringBundle = document.getElementById("xulschoolhello-string-bundle");
-  let message = stringBundle.getString("xulschoolhello.greeting.label");
-
-  window.alert(message);
-}
-
-
-

And, finally, this is our function declaration. Three lines of code are all we need for it to work. The first line in the body of the function declares a variable that will hold the stringbundle element defined in the overlay. The variable is declared using let, which is similar to var but with more restricted scope. Here you can read more about let declarations.

-

Just like in regular JS, we can use the DOM (Document Object Model) in order to manipulate the XUL document. First we get a reference of the stringbundle element in the document. This is a special element that allows us to obtain localized strings dynamically, by only providing a "key" that identifies the string. This is what we do on the second line. We call the getString method of the bundle element and get the localized message to be displayed. We then call the window.alert function with the message, just like we would do in an HTML document.

-

Locale

-

There are two types of locale files: DTD and properties, and in this example we use them both. DTD is the most efficient way of showing text in XUL, so you should use it whenever possible. It is somewhat inflexible so it can't be used for dynamically generated text, hence the need for an alternate way of getting localized strings.

-

Looking back at the menu code, you probably noticed some attributes such as this:

-
-
- 
label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloItem.accesskey;"
-
-
-

These attributes define the text that you see on the menus, and they are string keys that are defined in our DTD file, browserOverlay.dtd. The DTD file was included in the XUL file with the following code:

-
-
- 
<!DOCTYPE overlay SYSTEM "chrome://xulschoolhello/locale/browserOverlay.dtd" >
-
-
-

And in the DTD file you can see the association between keys and localized strings:

-
-
- 
<!ENTITY xulschoolhello.hello.label            "Hello World!">
-<!ENTITY xulschoolhello.helloMenu.accesskey    "l">
-<!ENTITY xulschoolhello.helloItem.accesskey    "H">
-
-
-

Notice that on the XUL file you enclose the string key with & and ; while on the DTD file you only specify the key. You may get weird parsing errors or incorrect localization if you don't get this right.

-

Access keys are the shortcuts that allow you to quickly navigate a menu using only the keyboard. They are also the only way to navigate a menu for people with accessibility problems, such as partial or total blindness, or physical disabilities that make using a mouse very difficult or impossible. You can easily recognize the access keys on Windows because the letter that corresponds to the access key is underlined, as in the following image:

-
-

-
-

Most user interface controls have the accesskey attribute, and you should use it. The value of the access key is localized because it should match a letter in the label text. You should also be careful to avoid access key repetition. For example, within a menu or submenu, access keys should not be repeated. In a window you have to be more careful picking access keys because there are usually more controls there. You have to be specially careful when picking access keys on an overlay. In our case, we can't use the letter "H" as an accesskey in the Main menu item, because it would be the same as the access key in the Help menu. Same goes with "W" and the Window menu on Mac OS. So we settled on the letter "l".

-

DTD strings are resolved and set when the document is being loaded. If you request the label attribute value for the Hello World menu using DOM, you get the localized string, not the string key. You cannot dynamically change an attribute value with a new DTD key, you have to set the new value directly:

-
-
- 
let helloItem = document.getElementById("xulschoolhello-hello-menu-item");
-
-// The alert will say "Hello World!"
-alert(helloItem.getAttribute("label"));
-// Wrong
-helloItem.setAttribute("label", "&xulschoolhello.hello2.label;");
-// Better
-helloItem.setAttribute("label", "Alternate message");
-// Right!
-helloItem.setAttribute("label", someStringBundle.getString("xulschoolhello.hello2.label"));
-
-
-

This is the reason DTD strings are not a solution for all localization cases, and the reason we often need to include string bundles in XUL files:

-
-
- 
<stringbundleset id="stringbundleset">
-  <stringbundle id="xulschoolhello-string-bundle"
-    src="chrome://xulschoolhello/locale/browserOverlay.properties" />
-</stringbundleset>
-
-
-

The stringbundleset element is just a container for stringbundle elements. There should only be one per document, which is the reason why we overlay the stringbundleset that is in browser.xul, hence the very generic id. We don't include the insertbefore or insertafter attributes because the ordering of string bundles doesn't make a difference. The element is completely invisible. If you don't include any of those ordering attributes in an overlay element, Firefox will just append your element as the last child of the parent element.

-

All you need for the string bundle is an id (to be able to fetch the element later) and the chrome path to the properties file. And, of course, you need the properties file:

-
-
- 
xulshoolhello.greeting.label = Hi! How are you?
-
-
-

The whitespace around the equals sign is ignored. Just like in install.rdf, comments can be added using the # character at the beginning of the line. Empty lines are ignored as well.

-

You will often want to include dynamic content as part of localized strings, like when you want to inform the user about some stat related to the extension. For example: "Found 5 words matching the search query". Your first idea would probably be to simply concatenate strings, and have one "Found" property and another "words matching..." property. This is not a good idea. It greatly complicates the work of localizers, and grammar rules on different languages may change the ordering of the sentence entirely. For this reason it's better to use parameters in the properties:

-
-
- 
xulshoolhello.search.label = Found %S words matching the search query!
-
-
-

Then you use getFormattedString instead of getString in order to get the localized string. Thanks to this we don't need to have multiple properties, and life is easier for translators. You can read more about it on the Text Formatting section of the XUL Tutorial. Also have a look at the Plurals and Localization article, that covers a localization feature in Firefox that allows you to further refine this last example to handle different types of plural forms that are also language-dependent.

-

Skin

-

Styling XUL is very similar to styling HTML. We'll look into some of the differences when we cover the XUL Box Model, and other more advanced topics. There isn't much styling you can do to a minimal menu and a very simple alert message, so the Hello World extension only includes an empty CSS file and the compulsory global skin file:

-
-
- 
<?xml-stylesheet type="text/css" href="chrome://global/skin/"  ?>
-<?xml-stylesheet type="text/css"
-  href="chrome://xulschoolhello/skin/browserOverlay.css"  ?>
-
-
-

The global skin CSS file holds the default styles for all XUL elements and windows. Forgetting to include this file in a XUL window usually leads to interesting and often unwanted results. In our case we don't really need to include it, since we're overlaying the main browser XUL file, and that file already includes this global CSS. At any rate it's better to always include it. This way it's harder to make the mistake of not including it. You can enter the chrome path in the location bar and inspect the file if you're curious.

-

This covers all of the files in the Hello World extension. Now you should have an idea of the basics involved in extension development, so now we'll jump right in and set up a development environment. But first, a little exercise.

-

Exercise

-

Make the following changes to the example extension:

- -

Repackage the XPI. Issue the following command from within the extension root directory on Linux or Mac OS X:

-
zip ../xulschoolhello2.xpi **/*
-
-

On Windows, use a ZIP tool to compress all files and subdirectories within the extension root directory. Name the file with extension .xpi

-

Re-install the XPI. You can just drag the XPI file to the browser and it will be installed locally.

-

Test it and verify your changes worked. If you run into problems at installation, it's likely that you didn't reproduce the XPI structure correctly, maybe adding unnecessary folders.

-
- Note: Packaging an extension is really just creating a ZIP archive of the contents of the main folder, then changing the filename extension to .XPI. Do not zip the containing folder, just its contents. The content folder, chrome.manifest, install.rdf, and other files and directories should be at the root level of your archive. If you zip the containing folder, your extension will not load.
-

Note that the Tools menu is hidden by default on Firefox 4 and above, on Windows and some Linux distributions. Check Menu Bar under the Options menu of the Firefox menu button to enable it.

-

Once you're done, you can look at this reference solution: Hello World 2.

-

{{ PreviousNext("XUL_School/Getting_Started_with_Firefox_Extensions", "XUL_School/Setting_Up_a_Development_Environment") }}

-

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/id/archive/mozilla/xulrunner/index.html b/files/id/archive/mozilla/xulrunner/index.html deleted file mode 100644 index 2bc8fd2c15..0000000000 --- a/files/id/archive/mozilla/xulrunner/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: XULRunner -slug: Archive/Mozilla/XULRunner -translation_of: Archive/Mozilla/XULRunner ---- -
- Getting Started with XULRunner
- A short introduction to XULRunner.
-
- XULRunner is a Mozilla runtime package that can be used to bootstrap XUL+XPCOM applications that are as rich as Firefox and Thunderbird. It provides mechanisms for installing, upgrading, and uninstalling these applications. XULRunner also provides libxul, a solution which allows the embedding of Mozilla technologies in other projects and products.
- - - - - - - -
-

Releases

-
-

XULRunner can be downloaded from ftp.mozilla.org. Please read the release notes for installation, uninstallation, and other information.

-

Firefox 3 and later ships with a private XULRunner package, which can run any compatible XULRunner application using the -app switch.

-

Older builds are also available.

-
-

Overview

- -

Documentation

-
-
- Getting Started with XULRunner
-
- Short tutorial on building desktop applications with XULRunner.
-
- XUL Tutorial
-
- Once you have a working XULRunner application, use the XUL tutorial to expand it into a fantastic XUL application.
-
- XULRunner tips
-
- A collection of tips for working with XULRunner.
-
- Deploying XULRunner
-
- An introduction on how to package your application with XULRunner.
-
- XULRunner Hall of Fame
-
- Tracks all available applications based on XULRunner.
-
- Build Documentation
-
- Learn how to get the source and build it.
-
- Debug Documentation
-
- Steps to configure Venkman to debug your App
-
- XULRunner Guide
-
- A fairly complete, but outdated, introduction and tutorial for XULRunner which collates much of the documentation found here.
-
-

View all...

- 		-

Community

- - - -

See also

- -
-

 

diff --git a/files/id/archive/web/index.html b/files/id/archive/web/index.html deleted file mode 100644 index 1784816dc4..0000000000 --- a/files/id/archive/web/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Arsip dokumentasi Web terbuka -slug: Archive/Web -tags: - - Archived - - NeedsTranslation - - TopicStub - - Web -translation_of: Archive/Web ---- -

{{obsolete_header}}

- -

Dokumentasi yang tercantum di bawah ini adalah arsip, materi usang tentang topik Web terbuka.

- -

{{LandingPageListSubpages}}

diff --git a/files/id/archive/web/standards-compliant_authoring_tools/index.html b/files/id/archive/web/standards-compliant_authoring_tools/index.html deleted file mode 100644 index 2126ebd25c..0000000000 --- a/files/id/archive/web/standards-compliant_authoring_tools/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Standards-Compliant Authoring Tools -slug: Archive/Web/Standards-Compliant_Authoring_Tools -translation_of: Archive/Web/Standards-Compliant_Authoring_Tools ---- -

Creating cross-browser code upfront will save you lots of time quality testing your web content. The following authoring tools adhere to the W3 standards. If you're using older versions of tools that rely on old browser bugs or generate browser-specific code, it may be time to upgrade:

- -

Some caveats: It appears that tools currently available from Namo generate IE-specific or Netscape 4-specific code that may require extra debugging for compatibility with standards-based browsers. Newer versions of Microsoft FrontPage™ have improved, however be sure not to rely on FrontPage-specific extensions for critical website content or functionality. Some versions of Microsoft Word create invalid HTML code that only works with Internet Explorer. Always be sure to validate your web pages.

-
-

Original Document Information

- -
- - -- cgit v1.2.3-54-g00ecf