Skip navigation
This discussion is locked
Currently Being Moderated

Edge Code Preview Update Release Notes

Dec 11, 2012 2:50 PM

System Requirements
------------
Windows

  • Intel® Pentium® 4 or AMD Athlon® 64 processor
  • Windows® 7 or Windows 8 operating system
  • 256MB of RAM (2GB of RAM recommended for Live Development)
  • 200MB of available hard-disk space for installation
  • 1280x800 display with 16-bit video card

  Mac OS 

  • Multicore Intel processor
  • Mac OS X v10.6, v10.7 or v10.8 operating system
  • 256MB of RAM (2GB of RAM recommended for Live Development)
  • 200MB of available hard-disk space for installation
  • 1280x800 display with 16-bit video card

 

Installation Instructions
----------------- 

  1. Login and download Edge Code Preview from https://creative.adobe.com/apps.
  2. If you aren’t already an Adobe Creative Cloud member, select “Sign Up” or “Join the Creative Cloud” to create an account. Note: Edge Code is available in all Creative Cloud plans including the FREE option.
  3. Click on the “Download” link for Edge Code in the Edge Tools & Services section.
  4. Save the installer file to a location on your hard drive.
  5. Located the installer and double-click to start the install process.
  6. Windows: You may specify a custom install location. We do not recommend you install over an existing copy of Edge Code.

 
NOTE: You are not required to uninstall previous versions of Edge Code.

What's New
---------------
Live Development for CSS and HTML 

  • Auto reload in Live Preview: The page is automatically refreshed when you save changes to any file other than .css (CSS changes are reflected instantly - no need to save). A dot next to the lightning bolt icon indicates pending changes that will lead to an auto-refresh when you save.
  • Local server support for Live Preview: Specify a base URL for the project root via File > Project Settings. This overrides the default file:// URL.
  • ‘Live Highlight’ from CSS code: While Live Preview is open, putting your cursor in a CSS rule in Edge Code will highlight all matching HTML elements in the browser. Use “File > Live Highlight” to toggle this off.

 
Overall UI 

  • Status bar with line and column info, JSLint status & spinner
  • Resizable search results & JSLint panel
  • Remember window size/position from last launch

 
Performance 

  • Major editor performance improvements: Almost doubles scrolling FPS, cuts 1/3 from keystroke response latency, and fixes freezes in files with very long lines (e.g. minified code).


General Code Editing

  • Tab size setting: Click the number in the lower-right of the status bar to choose tab size. This is currently a global setting, across all files and file types.
  • Incremental search while typing in the Find bar
  • Delete Line(s): Ctrl+Shift+D / Cmd+Shift+D deletes the line the cursor is on (or all lines the selection spans).
  • Select Line command: Ctrl+L selects the current line or adds one line to an existing selection.
  • Syntax highlighting for: YAML, SVG (as XML)
  • Block comment/uncomment: Use Ctrl+Shift+/ (Cmd+Shift+/ on Mac) to toggle block comments around the current selection.

 
Visual Editing 

  • Inline color picker: Use Quick Edit anywhere a hex color, rgb(), or hsl() appears to edit inline. Includes shortcut swatches for other colors used in the file.


HTML Code Editing

  • Code hinting for href/src: Hints for relative URLs based on files on disk. Press Tab to accept the selected hint for a folder name and drill down to its contents.
  • Auto-insert closing tags

 
Files & Folders Panel 

  • Working set context menu: Now includes Rename, Show In Tree.
  • New Folder command
  • Rename command
  • "Show in File Tree" command: Selects and shows the current editor's file in the left-hand file tree.
  • Remove recent projects dropdown entries: Open the dropdown and roll over an item to show "X" button.
  • Reorder working set by drag & drop
  • Sort working set: Sort the list of open files manually or automatically by file type, name or when added (the default).
  • Close All command
  • F2 shortcut for Rename
  • Find in Files scoping: Search in a specific subtree or even a single file. Right-click in the folder tree and choose “Find in...”

 
Extensions 

  • Move extensions folder outside application root: Extensions are now stored per user instead of in the application bundle. As before, you can use Help > Show Extensions Folder to access these locations:
    • Windows: `C:\Users\<user>\AppData\Roaming\Brackets\extensions`
    • Mac: `/Users/<user>/Library/Application Support/Brackets/extensions`
    • Extension developers can still place extensions in the Brackets source location instead, in the new `src/extensions/dev` folder.

 
Developer Workflow 

  • Automated unit tests - Unit tests now run automatically on a Mac build server. Results are not posted publicly yet.


Search

  • Quick Open search improvements: Quick Open now searches on the whole path (not just filename), and accepts CamelCase abbreviations and other non-contiguous matches.
  • Find and Find in Files: Search field turns red when no results are found. Invalid regexes trigger an error tip.


UI Changes
----------
Status bar - The JSLint star icon has moved from the upper-right to the lower-right, in the new status bar. A gold star means no errors (as before), while a red star (new) means errors are listed, and a gray star (new) means JSLint is not running on the current file. Change tab settings by clicking the "Spaces" and "4" labels in the lower right (the former is the same as toggling Edit > Use Tab Characters).

Extensions folder - The location where you install extensions has changed. See above for details.

Project settings - A Project Settings dialog is accessible from the File menu or the project dropdown menu in the sidebar. Currently the only setting available is the Live Preview Base URL.

Code hinting - Tab and Enter now work exactly the same when accepting a code hint suggestion.

Known Issues
-----------

  1. 1.     Text selection highlight sometimes jiggles when horizontally resizing window.
  2. 2.    Native File Menus are not translated in this preview of Edge Code.
  3. 3.    Color Picker doesn’t open up if alpha value in rgba() starts with ‘.’.

 

______________________________________________________________________ ____

 

Configuration requise
------------
Windows

  • Processeur Intel® Pentium® 4 ou AMD Athlon® 64
  • Système d’exploitation Windows® 7 ou Windows 8
  • 256 Mo de RAM (2 Go de RAM recommandés pour Live Development)
  • 200 Mo d’espace disponible sur le disque dur pour l’installation
  • Affichage 1280x800 avec carte vidéo 16 bits

  Mac OS 

  • Processeur Intel multicœur
  • Système d’exploitation Mac OS X v10.6, v10.7 ou v10.8
  • 256 Mo de RAM (2 Go de RAM recommandés pour Live Development)
  • 200 Mo d’espace disponible sur le disque dur pour l’installation
  • Affichage 1280x800 avec carte vidéo 16 bits

 

Instructions d’installation
----------------- 

  1. Connectez-vous et téléchargez Edge Code Preview depuis la page https://creative.adobe.com/apps.
  2. Si vous n’êtes pas déjà membre d’Adobe Creative Cloud, sélectionnez « S’enregistrer » ou « Adhérer à Creative Cloud » pour vous créer un compte. Remarque : Edge Code est disponible dans toutes les formules Creative Cloud, y compris la formule GRATUITE.
  3. Cliquez sur le lien « Télécharger » correspondant à Edge Code dans la section Outils et services Edge.
  4. Enregistrez le fichier du programme d’installation sur votre disque dur.
  5. Accédez à ce fichier et double-cliquez dessus pour lancer l’installation.
  6. Windows : vous pouvez indiquer un répertoire d’installation personnalisé. Il est recommandé de ne pas effectuer l’installation par-dessus une copie existante d’Edge Code.

 
REMARQUE : il n’est pas nécessaire de désinstaller les versions antérieures d’Edge Code.

Nouveautés
---------------
Live Development pour CSS et HTML 

  • Rechargement automatique dans l’Aperçu en direct : la page s’actualise automatiquement lorsque vous enregistrez des modifications dans n’importe quel fichier ne portant pas l’extension .css (les modifications CSS sont instantanément répercutées, vous n’avez pas besoin d’enregistrer). S’il y a un point à côté de l’icône représentant un éclair, cela signifie qu’il existe des modifications en attente qui entraîneront une actualisation automatique lorsque vous enregistrerez le document.
  • Prise en charge de serveurs locaux pour le module Aperçu en direct : indiquez une URL de base associée à la racine du projet en cliquant sur Fichier > Paramètres du projet. Cette opération a pour effet de remplacer l’URL file:// par défaut.
  • « Surlignage en direct » depuis le code CSS : lorsque le module Aperçu en direct est ouvert, si vous placez le curseur sur une règle CSS dans Edge Code, tous les éléments HTML correspondants apparaissent surlignés dans le navigateur. Cliquez sur « Fichier > Surlignage en direct » pour désactiver cette fonctionnalité.

 
Interface utilisateur globale 

  • Barre d’état avec informations sur les lignes et colonnes, statut JSLint et indicateur de chargement
  • Panneau de résultats de recherche et JSLint redimensionnable
  • Mémorisation des dimensions et de la position des fenêtres depuis le dernier lancement

 
Performances 

  • Optimisation majeure des performances de l’éditeur : performances quasiment deux fois plus élevées en termes de défilement FPS, latence du temps de réponse après frappe réduite d’un tiers, correction des gels de code dans les fichiers comportant des lignes très longues (code réduit).


Modification générale du code

  • Paramètre de taille des tabulations : cliquez sur le chiffre dans la partie inférieure droite de la barre d’état pour choisir la taille des tabulations. Il s’agit (pour le moment) d’un paramètre global qui s’applique à tous les fichiers et types de fichier.
  • Recherche incrémentielle lors de la saisie de données dans la barre de recherche
  • Suppression de lignes : les combinaisons de touches Ctrl+Shift+D ou Cmd+Shift+D permettent de supprimer la ligne sur laquelle se trouve le curseur (ou toutes les lignes sélectionnées).
  • Commande Sélectionner la ligne : la combinaison de touches Ctrl+L permet de sélectionner la ligne active ou d’ajouter une ligne à la sélection existante.
  • Mise en évidence de la syntaxe pour : YAML, SVG (en tant que XML).
  • Commenter les blocs/Annuler les commentaires : la combinaison Ctrl+Shift+/ (Cmd+Shift+/ sous Mac) permet d’activer ou de désactiver les commentaires sur les blocs autour de la sélection active.

 
Edition visuelle 

  • Sélecteur de couleurs en ligne : utilisez la fonction d’édition rapide chaque fois qu’une couleur hex, rgb() ou hsl() apparaît afin de modifier les données en ligne. Inclut des raccourcis vers les nuanciers pour les autres couleurs utilisées dans le fichier.


Modification de code HTML

  • Indicateurs de code pour href/src : conseils concernant les URL relatives en fonction des fichiers présents sur le disque. Appuyez sur la touche Tabulation pour accepter le conseil sélectionné pour un nom de dossier et accéder à son contenu.
  • Insertion automatique de balises de fermeture.

 
Panneau Fichiers et dossiers 

  • Menu contextuel sur l’ensemble de documents de travail : ajout des options Renommer et Afficher dans l’arborescence de fichiers.
  • Commande Nouveau dossier
  • Commande Renommer
  • Commande « Afficher dans l’arborescence de fichiers » : sélectionne et affiche le fichier actif de l’éditeur dans l’arborescence située sur la gauche.
  • Entrées déroulantes pour suppression des projets récents : ouvrez la liste déroulante et passez la souris sur un élément pour faire apparaître le bouton « X ».
  • Réorganisation de l’ensemble de documents de travail par glisser-déposer
  • Tri de l’ensemble de documents de travail : permet de trier la liste des fichiers ouverts manuellement ou automatiquement, par type de fichier, nom ou date d’ajout (option par défaut).
  • Commande Fermer tout
  • Raccourci F2 pour renommer un élément
  • Portée de l’option de recherche dans les fichiers : permet de lancer une recherche portant sur une sous-arborescence spécifique ou sur un seul fichier. Cliquez avec le bouton droit dans l’arborescence de dossiers et sélectionnez « Rechercher dans... ».

 
Extensions 

  • Déplacement du dossier d’extensions en dehors de la racine de l’application : les extensions sont désormais stockées par utilisateur, et non plus dans le dossier groupé de l’application. Vous pouvez toujours cliquer sur Aide > Afficher le dossier d’extensions pour accéder aux emplacements suivants :
    • Windows : C:\Utilisateurs\<utilisateur>\AppData\Roaming\Brackets\extensions
    • Mac : /Users/<utilisateur>/Library/Application Support/Brackets/extensions
    • En revanche, les développeurs peuvent toujours placer leurs extensions dans l’emplacement source de Brackets, dans le nouveau dossier « src/extensions/dev ».

 
Flux de développement 

  • Tests unitaires automatisés : des tests unitaires sont désormais exécutés automatiquement sur un serveur de versions Mac. Pour le moment, les résultats ne sont pas accessibles au grand public.


Recherche

  • Amélioration de la fonction de recherche Ouverture rapide : cette fonction fait désormais porter la recherche sur le chemin d’accès complet (et non simplement sur le nom de fichier) ; elle accepte également les abréviations CamelCase et les résultats non contigus.
  • Rechercher et Rechercher dans les fichiers : le champ de recherche s’affiche en rouge si le système ne trouve aucun résultat. Les expressions régulières non valides renvoient une erreur et un message explicatif.


Modifications de l’interface utilisateur
----------
Barre d’état - L’icône JSLint représentant une étoile ne se trouve plus dans l’angle supérieur droit mais figure désormais en bas en gauche, dans la nouvelle barre d’état. Si l’étoile est dorée, cela signifie qu’il n’y a pas d’erreur (comportement inchangé) ; si l’étoile est rouge (nouvelle fonctionnalité), cela signifie qu’il existe des erreurs ; si l’étoile est grise (nouvelle fonctionnalité), cela signifie que JSLint ne s’exécute pas sur le fichier en cours. Modifiez les paramètres de tabulation en cliquant sur les libellés « Espaces » et « 4 » dans la partie inférieure droite (même chose que l’option de menu Edition > Utiliser les caractères de tabulation).

Dossiers d’extensions - L’emplacement d’installation des extensions n’est plus le même. Voir ci-dessus pour plus de détails.

Paramètres du projet - Une boîte de dialogue intitulée Paramètres du projet est accessible depuis le menu Fichier ou depuis le menu déroulant du projet dans la barre latérale. Actuellement, le seul paramètre disponible est « URL de base de l’Aperçu en direct ».

Indications de code - Désormais, les touches Tabulation et Entrée jouent exactement le même rôle lorsque vous acceptez une suggestion de code.

Problèmes connus
-----------

  1. 1.     Le texte surligné présente parfois un léger tremblement en cas de redimensionnement horizontal de la fenêtre.
  2. 2.    Les menus de fichiers natifs ne sont pas traduits dans cette version préliminaire d’Edge Code.
  3. 3.    Le sélecteur de couleurs ne s’ouvre pas si la valeur alpha de l’attribut rgba() commence par un point.
 

More Like This

  • Retrieving data ...

Bookmarked By (0)