@@ -37402,6 +37402,7 @@ define("extensionsIntegrated/Phoenix-live-preview/main", function (require, expo
3740237402 FileSystem = require("filesystem/FileSystem"),
3740337403 BrowserStaticServer = require("./BrowserStaticServer"),
3740437404 NodeStaticServer = require("./NodeStaticServer"),
37405+ NodeUtils = require("utils/NodeUtils"),
3740537406 TrustProjectHTML = `<!DOCTYPE html>
3740637407<html lang="en">
3740737408<head>
@@ -37513,13 +37514,29 @@ define("extensionsIntegrated/Phoenix-live-preview/main", function (require, expo
3751337514</html>`,
3751437515 panelHTML = `<div id="panel-live-preview">
3751537516 <div id="live-preview-plugin-toolbar" class="plugin-toolbar" title="Live Preview" style="display: flex; align-items: center; flex-direction: row;">
37516- <div style="position: absolute; left: 0px ;">
37517+ <div style="width: 33%;display: flex ;">
3751737518 <button id="reloadLivePreviewButton" title="{{clickToReload}}" class="btn-alt-quiet toolbar-button reload-icon"></button>
3751837519 <button id="highlightLPButton" title="{{toggleLiveHighlight}}" class="btn-alt-quiet toolbar-button pointer-fill-icon"></button>
3751937520 </div>
37520- <button id="pinURLButton" title="{{clickToPinUnpin}}" class="btn-alt-quiet toolbar-button unpin-icon"></button>
37521- <span id="panel-live-preview-title">{{livePreview}}</span>
37522- <button id="livePreviewPopoutButton" title="{{clickToPopout}}" class="btn-alt-quiet toolbar-button open-icon"></button>
37521+ <div style="width: fit-content;display: flex;justify-content: center; align-items: center;">
37522+ <button id="pinURLButton" title="{{clickToPinUnpin}}" class="btn-alt-quiet toolbar-button unpin-icon"></button>
37523+ <span id="panel-live-preview-title">{{livePreview}}</span>
37524+ <button id="livePreviewPopoutButton" title="{{clickToPopout}}" class="btn-alt-quiet toolbar-button open-icon"></button>
37525+ </div>
37526+ <div style="width: 33%;display: flex;align-items: center;">
37527+ <button id="safariButton" title="{{openInSafari}}" class="btn-alt-quiet toolbar-button live-preview-browser-btn forced-hidden">
37528+ <img src="thirdparty/devicon/icons/safari/safari-original.svg" />
37529+ </button>
37530+ <button id="chromeButton" title="{{openInChrome}}" class="btn-alt-quiet toolbar-button live-preview-browser-btn forced-hidden">
37531+ <img src="thirdparty/devicon/icons/chrome/chrome-original.svg" />
37532+ </button>
37533+ <button id="edgeButton" title="{{openInEdge}}" class="btn-alt-quiet toolbar-button live-preview-browser-btn forced-hidden">
37534+ <img src="styles/images/edge-logo.svg" />
37535+ </button>
37536+ <button id="firefoxButton" title="{{openInFirefox}}" class="btn-alt-quiet toolbar-button live-preview-browser-btn forced-hidden">
37537+ <img src="thirdparty/devicon/icons/firefox/firefox-original.svg" />
37538+ </button>
37539+ </div>
3752337540 <iframe id="live-preview-server-iframe"
3752437541 title="live preview server"
3752537542 src="about:blank"
@@ -37537,6 +37554,8 @@ define("extensionsIntegrated/Phoenix-live-preview/main", function (require, expo
3753737554 </div>
3753837555</div>
3753937556`,
37557+ Dialogs = require("widgets/Dialogs"),
37558+ DefaultDialogs = require("widgets/DefaultDialogs"),
3754037559 utils = require('./utils');
3754137560
3754237561 const StaticServer = Phoenix.browser.isTauri? NodeStaticServer : BrowserStaticServer;
@@ -37564,7 +37583,11 @@ define("extensionsIntegrated/Phoenix-live-preview/main", function (require, expo
3756437583 $pinUrlBtn,
3756537584 $highlightBtn,
3756637585 $livePreviewPopBtn,
37567- $reloadBtn;
37586+ $reloadBtn,
37587+ $chromeButton,
37588+ $safariButton,
37589+ $edgeButton,
37590+ $firefoxButton;
3756837591
3756937592 StaticServer.on(EVENT_EMBEDDED_IFRAME_WHO_AM_I, function () {
3757037593 if($iframe && $iframe[0]) {
@@ -37741,13 +37764,32 @@ define("extensionsIntegrated/Phoenix-live-preview/main", function (require, expo
3774137764 Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "HighlightBtn", "click");
3774237765 }
3774337766
37744- function _popoutLivePreview() {
37767+ const ALLOWED_BROWSERS_NAMES = [`chrome`, `firefox`, `safari`, `edge`, `browser`, `browserPrivate`];
37768+ function _popoutLivePreview(browserName) {
3774537769 // We cannot use $iframe.src here if panel is hidden
3774637770 const openURL = StaticServer.getTabPopoutURL(currentLivePreviewURL);
37747- NativeApp.openURLInDefaultBrowser(openURL, "livePreview");
37748- Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "popoutBtn", "click");
37749- _loadPreview(true);
37750- _setPanelVisibility(false);
37771+ if(browserName && ALLOWED_BROWSERS_NAMES.includes(browserName)){
37772+ Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "popout", browserName);
37773+ NodeUtils.openUrlInBrowser(openURL, browserName)
37774+ .then(()=>{
37775+ _loadPreview(true);
37776+ _setPanelVisibility(false);
37777+ })
37778+ .catch(err=>{
37779+ console.error("Error opening url in browser: ", browserName, err);
37780+ Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "popFail", browserName);
37781+ Dialogs.showModalDialog(
37782+ DefaultDialogs.DIALOG_ID_ERROR,
37783+ StringUtils.format(Strings.LIVE_DEV_OPEN_ERROR_TITLE, browserName),
37784+ StringUtils.format(Strings.LIVE_DEV_OPEN_ERROR_MESSAGE, browserName)
37785+ );
37786+ });
37787+ } else {
37788+ NativeApp.openURLInDefaultBrowser(openURL, "livePreview");
37789+ Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "popoutBtn", "click");
37790+ _loadPreview(true);
37791+ _setPanelVisibility(false);
37792+ }
3775137793 }
3775237794
3775337795 function _setTitle(fileName) {
@@ -37761,13 +37803,30 @@ define("extensionsIntegrated/Phoenix-live-preview/main", function (require, expo
3776137803 document.getElementById("live-preview-plugin-toolbar").title = tooltip;
3776237804 }
3776337805
37806+ function _showOpenBrowserIcons() {
37807+ if(!Phoenix.browser.isTauri) {
37808+ return;
37809+ }
37810+ // only in desktop builds we show open with browser icons
37811+ $chromeButton.removeClass("forced-hidden");
37812+ $edgeButton.removeClass("forced-hidden");
37813+ $firefoxButton.removeClass("forced-hidden");
37814+ if (brackets.platform === "mac") {
37815+ $safariButton.removeClass("forced-hidden");
37816+ }
37817+ }
37818+
3776437819 async function _createExtensionPanel() {
3776537820 let templateVars = {
3776637821 Strings: Strings,
3776737822 livePreview: Strings.LIVE_DEV_STATUS_TIP_OUT_OF_SYNC,
3776837823 clickToReload: Strings.LIVE_DEV_CLICK_TO_RELOAD_PAGE,
3776937824 toggleLiveHighlight: Strings.LIVE_DEV_TOGGLE_LIVE_HIGHLIGHT,
3777037825 clickToPopout: Strings.LIVE_DEV_CLICK_POPOUT,
37826+ openInChrome: Strings.LIVE_DEV_OPEN_CHROME,
37827+ openInSafari: Strings.LIVE_DEV_OPEN_SAFARI,
37828+ openInEdge: Strings.LIVE_DEV_OPEN_EDGE,
37829+ openInFirefox: Strings.LIVE_DEV_OPEN_FIREFOX,
3777137830 clickToPinUnpin: Strings.LIVE_DEV_CLICK_TO_PIN_UNPIN
3777237831 };
3777337832 const PANEL_MIN_SIZE = 50;
@@ -37780,9 +37839,26 @@ define("extensionsIntegrated/Phoenix-live-preview/main", function (require, expo
3778037839 $highlightBtn = $panel.find("#highlightLPButton");
3778137840 $reloadBtn = $panel.find("#reloadLivePreviewButton");
3778237841 $livePreviewPopBtn = $panel.find("#livePreviewPopoutButton");
37842+ $chromeButton = $panel.find("#chromeButton");
37843+ $safariButton = $panel.find("#safariButton");
37844+ $edgeButton = $panel.find("#edgeButton");
37845+ $firefoxButton = $panel.find("#firefoxButton");
3778337846 $iframe[0].onload = function () {
3778437847 $iframe.attr('srcdoc', null);
3778537848 };
37849+ $chromeButton.on("click", ()=>{
37850+ _popoutLivePreview("chrome");
37851+ });
37852+ $safariButton.on("click", ()=>{
37853+ _popoutLivePreview("safari");
37854+ });
37855+ $edgeButton.on("click", ()=>{
37856+ _popoutLivePreview("edge");
37857+ });
37858+ $firefoxButton.on("click", ()=>{
37859+ _popoutLivePreview("firefox");
37860+ });
37861+ _showOpenBrowserIcons();
3778637862
3778737863 const popoutSupported = Phoenix.browser.isTauri
3778837864 || Phoenix.browser.desktop.isChromeBased || Phoenix.browser.desktop.isFirefox;
@@ -83536,6 +83612,12 @@ define("nls/root/strings", {
8353683612 "LIVE_DEV_CLICK_TO_RELOAD_PAGE": "Reload Page",
8353783613 "LIVE_DEV_TOGGLE_LIVE_HIGHLIGHT": "Toggle Live Preview Highlights",
8353883614 "LIVE_DEV_CLICK_POPOUT": "Popout Live Preview To New Window",
83615+ "LIVE_DEV_OPEN_CHROME": "Open In Chrome\u2026",
83616+ "LIVE_DEV_OPEN_SAFARI": "Open In Safari\u2026",
83617+ "LIVE_DEV_OPEN_EDGE": "Open In Edge\u2026",
83618+ "LIVE_DEV_OPEN_FIREFOX": "Open In Firefox\u2026",
83619+ "LIVE_DEV_OPEN_ERROR_TITLE": "Error Opening Live Preview in {0}",
83620+ "LIVE_DEV_OPEN_ERROR_MESSAGE": "Make sure that {0} browser is installed and try again.",
8353983621 "LIVE_DEV_CLICK_TO_PIN_UNPIN": "Pin on Unpin Preview Page",
8354083622 "LIVE_DEV_STATUS_TIP_SYNC_ERROR": "Live Preview (not updating due to syntax error)",
8354183623
@@ -137985,6 +138067,13 @@ define("utils/NodeUtils", function (require, exports, module) {
137985138067 return utilsConnector.execPeer("getLinuxOSFlavorName");
137986138068 }
137987138069
138070+ async function openUrlInBrowser(url, browserName) {
138071+ if(!Phoenix.browser.isTauri) {
138072+ throw new Error("openUrlInBrowser not available in browser");
138073+ }
138074+ return utilsConnector.execPeer("openUrlInBrowser", {url, browserName});
138075+ }
138076+
137988138077 if(NodeConnector.isNodeAvailable()) {
137989138078 // todo we need to update the strings if a user extension adds its translations. Since we dont support
137990138079 // node extensions for now, should consider when we support node extensions.
@@ -137995,6 +138084,7 @@ define("utils/NodeUtils", function (require, exports, module) {
137995138084 exports.updateNodeLocaleStrings = updateNodeLocaleStrings;
137996138085 exports.getPhoenixBinaryVersion = getPhoenixBinaryVersion;
137997138086 exports.getLinuxOSFlavorName = getLinuxOSFlavorName;
138087+ exports.openUrlInBrowser = openUrlInBrowser;
137998138088 exports.isNodeReady = NodeConnector.isNodeReady;
137999138089
138000138090 window.NodeUtils = exports;
0 commit comments