Layers panel - Live Preview feature

src/extensionsIntegrated/Phoenix-live-preview/main.js

@@ -45,6 +45,7 @@ define(function (require, exports, module) {
         FileViewController  = require("project/FileViewController"),
         DocumentManager = require("document/DocumentManager"),
         ExtensionInterface = require("utils/ExtensionInterface"),
+        EventDispatcher   = require("utils/EventDispatcher"),
         CommandManager     = require("command/CommandManager"),
         Commands           = require("command/Commands"),
         Menus              = require("command/Menus"),
@@ -135,6 +136,9 @@ define(function (require, exports, module) {
     });
 
     const LIVE_PREVIEW_PANEL_ID = "live-preview-panel";
+
+    /** Fired with the full path whenever the preview switches to a different file. */
+    const EVENT_PREVIEWED_FILE_CHANGE = "previewedFileChange";
     const LIVE_PREVIEW_IFRAME_ID = "panel-live-preview-frame";
     const MDVIEWR_IFRAME_ID = "panel-md-preview-frame";
     const _sandboxAttr = Phoenix.isTestWindow ? "" :
@@ -614,6 +618,19 @@ define(function (require, exports, module) {
         _isMdviewrActive = false,
         $mdviewrIframe = null; // persistent md iframe, survives HTML preview switches
 
+    /**
+     * Records which file the preview is showing and tells listeners when that changes.
+     * @param {string} fullPath
+     * @private
+     */
+    function _setPreviewedFile(fullPath) {
+        if (currentPreviewFile === fullPath) {
+            return;
+        }
+        currentPreviewFile = fullPath;
+        exports.trigger(EVENT_PREVIEWED_FILE_CHANGE, fullPath);
+    }
+
     function _blankIframe() {
         // we have to remove the dom node altog as at time chrome fails to clear workers if we just change
         // src. so we delete the node itself to eb thorough.
@@ -956,7 +973,7 @@ define(function (require, exports, module) {
         const mdFileURL = encodeURI(previewDetails.URL);
         const baseURL = mdFileURL.substring(0, mdFileURL.lastIndexOf("/") + 1);
 
-        currentPreviewFile = previewDetails.fullPath;
+        _setPreviewedFile(previewDetails.fullPath);
         if (!urlPinned) {
             currentLivePreviewURL = mdFileURL;
         }
@@ -1075,7 +1092,7 @@ define(function (require, exports, module) {
         // preview breaks sporadically. to alleviate this, we create a new iframe every time.
         if(!urlPinned) {
             currentLivePreviewURL = newSrc;
-            currentPreviewFile = previewDetails.fullPath;
+            _setPreviewedFile(previewDetails.fullPath);
         }
         if(isReload && previewDetails.isHTMLFile){
             LiveDevelopment.openLivePreview();
@@ -1741,10 +1758,24 @@ define(function (require, exports, module) {
         _loadPreview(true);
     }
 
+    /**
+     * Full path of the file currently loaded in the preview, which is not always the
+     * file in the editor: the url can be pinned, and a file with no preview of its own
+     * leaves the last previewed one up.
+     * @return {string} empty string when nothing has been previewed yet
+     */
+    function getPreviewedFilePath() {
+        return currentPreviewFile;
+    }
+
+    EventDispatcher.makeEventDispatcher(exports);
+
     // private API to be used inside phoenix codebase only
     exports.LIVE_PREVIEW_PANEL_ID = LIVE_PREVIEW_PANEL_ID;
+    exports.EVENT_PREVIEWED_FILE_CHANGE = EVENT_PREVIEWED_FILE_CHANGE;
     exports.showInterstitial = showInterstitial;
     exports.hideInterstitial = hideInterstitial;
+    exports.getPreviewedFilePath = getPreviewedFilePath;
 });
 
 

src/nls/root/strings.js

@@ -775,6 +775,7 @@ define({
     "LIVE_DEV_IMAGE_FOLDER_DIALOG_REMEMBER": "Don't ask again for this project",
     "AVAILABLE_IN_PRO_TITLE": "Available in Phoenix Pro",
     "DEVICE_SIZE_LIMIT_MESSAGE": "To switch between mobile, tablet, and desktop views, upgrade to Phoenix Pro.",
+    "LAYERS_PANEL_LIMIT_MESSAGE": "To see your page structure and select or edit any element in it, upgrade to Phoenix Pro.",
     "DEVICE_SIZE_NOT_ENOUGH_SPACE": "This screen doesn’t fit in the current window size — try expanding the window",
     "DEVICE_SIZE_CYCLE_NO_FIT": "Screen too small to switch to another device size — increase the window size",
     "DEVICE_SIZE_CYCLE_TOOLTIP": "Switch between mobile, tablet, and desktop",
@@ -809,6 +810,36 @@ define({
     "LIVE_PREVIEW_SHOW_STYLES_BAR": "Show Styles Bar",
     "LIVE_PREVIEW_MODE_PREFERENCE": "'{0}' shows only the webpage, '{1}' connects the webpage to your code - click on elements to jump to their code and vice versa, '{2}' provides highlighting along with advanced element manipulation",
     "LIVE_PREVIEW_CONFIGURE_MODES": "Configure Live Preview Modes",
+    "LIVE_PREVIEW_LAYERS_TAB": "Layers",
+    "LIVE_PREVIEW_LAYERS_NEEDS_PREVIEW": "The Layers panel needs a live preview.",
+    "LIVE_PREVIEW_LAYERS_OPEN_PREVIEW": "Open Live Preview",
+    "LIVE_PREVIEW_LAYERS_NEEDS_HTML": "Open an HTML file to see its layers.",
+    "LIVE_PREVIEW_LAYERS_NEEDS_EDIT_MODE": "The Layers panel needs edit mode.",
+    "LIVE_PREVIEW_LAYERS_ENABLE_EDIT_MODE": "Turn on Edit Mode",
+    "LIVE_PREVIEW_LAYERS_ELEMENTS": "Elements",
+    "LIVE_PREVIEW_LAYERS_SEARCH": "Search elements",
+    "LIVE_PREVIEW_LAYERS_NO_ELEMENTS": "No elements to show",
+    "LIVE_PREVIEW_LAYERS_NO_MATCHES": "No matching elements",
+    "LIVE_PREVIEW_LAYERS_TRUNCATED": "Showing the first {0} elements",
+    "LIVE_PREVIEW_LAYERS_COLLAPSE_ALL": "Collapse All",
+    "LIVE_PREVIEW_LAYERS_EXPAND_LEVEL": "Expand to Level",
+    "LIVE_PREVIEW_LAYERS_LEVEL": "Level {0}",
+    "LIVE_PREVIEW_LAYERS_LEVEL_ALL": "All Levels",
+    "LIVE_PREVIEW_LAYERS_SHOW_TEXT_NODES": "Show Text Nodes",
+    "LIVE_PREVIEW_LAYERS_HIDE_TEXT_NODES": "Hide Text Nodes",
+    "LIVE_PREVIEW_LAYERS_MOVE_UP": "Move Up",
+    "LIVE_PREVIEW_LAYERS_MOVE_DOWN": "Move Down",
+    "LIVE_PREVIEW_LAYERS_REVEAL_IN_CODE": "Reveal in Code",
+    "LIVE_PREVIEW_LAYERS_ADD_ATTRIBUTE": "Add Attribute",
+    "LIVE_PREVIEW_LAYERS_REMOVE_ATTRIBUTE": "Remove Attribute",
+    "LIVE_PREVIEW_LAYERS_PROPERTIES": "Properties",
+    "LIVE_PREVIEW_LAYERS_STYLES": "Styles",
+    "LIVE_PREVIEW_LAYERS_NO_SELECTION": "Select an element to see its details",
+    "LIVE_PREVIEW_LAYERS_NOT_IN_SOURCE": "This element is not in the source file",
+    "LIVE_PREVIEW_LAYERS_NO_STYLES": "No styles applied",
+    "LIVE_PREVIEW_LAYERS_OPEN_SOURCE": "Open in editor",
+    "LIVE_PREVIEW_LAYERS_RULE_INACTIVE": "Not active in the current state",
+    "LIVE_PREVIEW_LAYERS_EDIT_STYLE": "Edit in Styles Bar",
 
     "LIVE_DEV_DETACHED_REPLACED_WITH_DEVTOOLS": "Live Preview was canceled because the browser's developer tools were opened",
     "LIVE_DEV_DETACHED_TARGET_CLOSED": "Live Preview was canceled because the page was closed in the browser",