From 03d683d37e2f8d9a9fefe88f1b245eb833fa1301 Mon Sep 17 00:00:00 2001 From: Gautam Jha Date: Thu, 7 Nov 2019 18:09:08 +0530 Subject: [PATCH 1/7] Adding infobar for remote debugging enabled --- src/brackets.js | 10 ++ src/htmlContent/infoBar-template.html | 20 +++ src/nls/root/strings.js | 5 +- src/widgets/InfoBar.js | 202 ++++++++++++++++++++++++++ 4 files changed, 236 insertions(+), 1 deletion(-) create mode 100644 src/htmlContent/infoBar-template.html create mode 100644 src/widgets/InfoBar.js diff --git a/src/brackets.js b/src/brackets.js index 27c543879c9..0efed88ab37 100644 --- a/src/brackets.js +++ b/src/brackets.js @@ -257,6 +257,16 @@ define(function (require, exports, module) { ); } + brackets.app.getRemoteDebuggingPort(function (err, remote_debugging_port){ + if (remote_debugging_port && remote_debugging_port > 0) { + var InfoBar = require('widgets/InfoBar'); + InfoBar.showUpdateBar({ + type: "error", + title: `${Strings.REMOTE_DEBUGGING_ENABLED} ${remote_debugging_port}`, + description: "" + }); + } + }); // Use quiet scrollbars if we aren't on Lion. If we're on Lion, only // use native scroll bars when the mouse is not plugged in or when // using the "Always" scroll bar setting. diff --git a/src/htmlContent/infoBar-template.html b/src/htmlContent/infoBar-template.html new file mode 100644 index 00000000000..9014aac8d21 --- /dev/null +++ b/src/htmlContent/infoBar-template.html @@ -0,0 +1,20 @@ +
+
+ +
+
+

{{title}}  {{{description}}}

+
+ {{#needButtons}} +
+ {{#buttons}} + + {{/buttons}} +
+ {{/needButtons}} + {{^buttons}} +
+ +
+ {{/buttons}} +
\ No newline at end of file diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index dc74e2f354c..b0146f07329 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -897,5 +897,8 @@ define({ "REFERENCES_NO_RESULTS" : "No References available for current cursor position", "CMD_FIND_DOCUMENT_SYMBOLS" : "Find Document Symbols", - "CMD_FIND_PROJECT_SYMBOLS" : "Find Project Symbols" + "CMD_FIND_PROJECT_SYMBOLS" : "Find Project Symbols", + + // Remote debugging enabled + "REMOTE_DEBUGGING_ENABLED" : "Remote Debugging Enabled on Port:" }); diff --git a/src/widgets/InfoBar.js b/src/widgets/InfoBar.js new file mode 100644 index 00000000000..6d4c5429c25 --- /dev/null +++ b/src/widgets/InfoBar.js @@ -0,0 +1,202 @@ +/* + * Copyright (c) 2018 - present Adobe Systems Incorporated. All rights reserved. + * + * Permission is hereby granted, free of charge, to any person obtaining a + * copy of this software and associated documentation files (the "Software"), + * to deal in the Software without restriction, including without limitation + * the rights to use, copy, modify, merge, publish, distribute, sublicense, + * and/or sell copies of the Software, and to permit persons to whom the + * Software is furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING + * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER + * DEALINGS IN THE SOFTWARE. + * + */ + +define(function (require, exports, module) { + "use strict"; + + var MainViewManager = require("view/MainViewManager"), + Mustache = require("thirdparty/mustache/mustache"), + EventDispatcher = require("utils/EventDispatcher"), + UpdateBarHtml = require("text!htmlContent/infoBar-template.html"), + Strings = require("strings"), + _ = require("thirdparty/lodash"); + + EventDispatcher.makeEventDispatcher(exports); + + /** Event triggered when Restart button is clicked on the update bar + */ + var RESTART_BTN_CLICKED = "restartBtnClicked"; + + /** Event triggered when Later button is clicked on the update bar + */ + var LATER_BTN_CLICKED = "laterBtnClicked"; + + // Key handlers for buttons in UI + var SPACE_KEY = 32, // keycode for space key + ESC_KEY = 27; // keycode for escape key + + /** + * Generates the json to be used by Mustache for rendering + * @param {object} msgObj - json object containing message information to be displayed + * @returns {object} - the generated json object + */ + function generateJsonForMustache(msgObj) { + var msgJsonObj = {}; + if (msgObj.type) { + msgJsonObj.type = "'" + msgObj.type + "'"; + } + msgJsonObj.title = msgObj.title; + msgJsonObj.description = msgObj.description; + if (msgObj.needButtons) { + msgJsonObj.buttons = [{ + "id": "restart", + "value": Strings.RESTART_BUTTON, + "tIndex": "'0'" + }, { + "id": "later", + "value": Strings.LATER_BUTTON, + "tIndex": "'0'" + }]; + msgJsonObj.needButtons = msgObj.needButtons; + } + return msgJsonObj; + } + + /** + * Removes and cleans up the update bar from DOM + */ + function cleanUpdateBar() { + var $updateBar = $('#update-bar'); + if ($updateBar.length > 0) { + $updateBar.remove(); + } + $(window.document).off("keydown.AutoUpdate"); + $(window).off('resize.AutoUpdateBar'); + } + + /** + * Displays the Update Bar UI + * @param {object} msgObj - json object containing message info to be displayed + * + */ + function showUpdateBar(msgObj) { + var jsonToMustache = generateJsonForMustache(msgObj), + $updateBarElement = $(Mustache.render(UpdateBarHtml, jsonToMustache)); + + cleanUpdateBar(); //Remove an already existing update bar, if any + $updateBarElement.prependTo(".content"); + + var $updateBar = $('#update-bar'), + $updateContent = $updateBar.find('#update-content'), + $contentContainer = $updateBar.find('#content-container'), + $buttonContainer = $updateBar.find('#button-container'), + $iconContainer = $updateBar.find('#icon-container'), + $closeIconContainer = $updateBar.find('#close-icon-container'), + $heading = $updateBar.find('#heading'), + $description = $updateBar.find('#description'), + $restart = $updateBar.find('#update-btn-restart'), + $later = $updateBar.find('#update-btn-later'), + $closeIcon = $updateBar.find('#close-icon'); + + if ($updateContent.length > 0) { + if ($updateContent[0].scrollWidth > $updateContent.innerWidth()) { + //Text has over-flown, show the update content as tooltip message + if ($contentContainer.length > 0 && + $heading.length > 0 && + $description.length > 0) { + $contentContainer.attr("title", $heading.text() + $description.text()); + } + } + } + // Content Container Width between Icon Container and Button Container or Close Icon Container + // will be assigned when window will be rezied. + var resizeContentContainer = function () { + if($updateContent.length > 0 && $contentContainer.length > 0 && $updateBar.length > 0) { + var newWidth = $updateBar.outerWidth() - 38; + if($buttonContainer.length > 0) { + newWidth = newWidth- $buttonContainer.outerWidth(); + } + if($iconContainer.length > 0) { + newWidth = newWidth - $iconContainer.outerWidth(); + } + if($closeIconContainer.length > 0) { + newWidth = newWidth - $closeIconContainer.outerWidth(); + } + + $contentContainer.css({ + "maxWidth": newWidth + }); + } + }; + + resizeContentContainer(); + $(window).on('resize.AutoUpdateBar', _.debounce(resizeContentContainer, 150)); + + //Event handlers on the Update Bar + + // Click and key handlers on Restart button + if ($restart.length > 0) { + $restart.click(function () { + cleanUpdateBar(); + exports.trigger(exports.RESTART_BTN_CLICKED); + }); + + $restart.keyup(function (event) { + if (event.which === SPACE_KEY) { + $restart.trigger('click'); + } + }); + } + + // Click and key handlers on Later button + if ($later.length > 0) { + $later.click(function () { + cleanUpdateBar(); + MainViewManager.focusActivePane(); + exports.trigger(exports.LATER_BTN_CLICKED); + }); + + $later.keyup(function (event) { + if (event.which === SPACE_KEY) { + $later.trigger('click'); + } + }); + } + + // Click and key handlers on Close button + if ($closeIcon.length > 0) { + $closeIcon.click(function () { + cleanUpdateBar(); + MainViewManager.focusActivePane(); + }); + + $closeIcon.keyup(function (event) { + if (event.which === SPACE_KEY) { + $closeIcon.trigger('click'); + } + }); + } + $(window.document).on("keydown.AutoUpdate", function (event) { + var code = event.which; + if (code === ESC_KEY) { + // Keyboard input of Esc key on Update Bar dismisses and removes the bar + cleanUpdateBar(); + MainViewManager.focusActivePane(); + event.stopImmediatePropagation(); + } + }); + } + exports.showUpdateBar = showUpdateBar; + exports.RESTART_BTN_CLICKED = RESTART_BTN_CLICKED; + exports.LATER_BTN_CLICKED = LATER_BTN_CLICKED; +}); From 41c851ae4716287fabe9aa7a8671acc6603e720f Mon Sep 17 00:00:00 2001 From: Gautam Jha Date: Thu, 7 Nov 2019 19:05:31 +0530 Subject: [PATCH 2/7] Changing infobar type to warning --- src/brackets.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/brackets.js b/src/brackets.js index 0efed88ab37..8d8a6a52f9f 100644 --- a/src/brackets.js +++ b/src/brackets.js @@ -261,7 +261,7 @@ define(function (require, exports, module) { if (remote_debugging_port && remote_debugging_port > 0) { var InfoBar = require('widgets/InfoBar'); InfoBar.showUpdateBar({ - type: "error", + type: "warning", title: `${Strings.REMOTE_DEBUGGING_ENABLED} ${remote_debugging_port}`, description: "" }); From 2bdc286f7eaadf7bd09d0079adc9974c000cdadc Mon Sep 17 00:00:00 2001 From: Gautam Jha Date: Fri, 8 Nov 2019 15:59:37 +0530 Subject: [PATCH 3/7] Removed button related codes --- src/htmlContent/infoBar-template.html | 7 --- src/widgets/InfoBar.js | 65 --------------------------- 2 files changed, 72 deletions(-) diff --git a/src/htmlContent/infoBar-template.html b/src/htmlContent/infoBar-template.html index 9014aac8d21..3dfc457d7c9 100644 --- a/src/htmlContent/infoBar-template.html +++ b/src/htmlContent/infoBar-template.html @@ -5,13 +5,6 @@

{{title}}  {{{description}}}

- {{#needButtons}} -
- {{#buttons}} - - {{/buttons}} -
- {{/needButtons}} {{^buttons}}
diff --git a/src/widgets/InfoBar.js b/src/widgets/InfoBar.js index 6d4c5429c25..c8b4ec3b3c0 100644 --- a/src/widgets/InfoBar.js +++ b/src/widgets/InfoBar.js @@ -28,19 +28,10 @@ define(function (require, exports, module) { Mustache = require("thirdparty/mustache/mustache"), EventDispatcher = require("utils/EventDispatcher"), UpdateBarHtml = require("text!htmlContent/infoBar-template.html"), - Strings = require("strings"), _ = require("thirdparty/lodash"); EventDispatcher.makeEventDispatcher(exports); - /** Event triggered when Restart button is clicked on the update bar - */ - var RESTART_BTN_CLICKED = "restartBtnClicked"; - - /** Event triggered when Later button is clicked on the update bar - */ - var LATER_BTN_CLICKED = "laterBtnClicked"; - // Key handlers for buttons in UI var SPACE_KEY = 32, // keycode for space key ESC_KEY = 27; // keycode for escape key @@ -57,18 +48,6 @@ define(function (require, exports, module) { } msgJsonObj.title = msgObj.title; msgJsonObj.description = msgObj.description; - if (msgObj.needButtons) { - msgJsonObj.buttons = [{ - "id": "restart", - "value": Strings.RESTART_BUTTON, - "tIndex": "'0'" - }, { - "id": "later", - "value": Strings.LATER_BUTTON, - "tIndex": "'0'" - }]; - msgJsonObj.needButtons = msgObj.needButtons; - } return msgJsonObj; } @@ -99,13 +78,10 @@ define(function (require, exports, module) { var $updateBar = $('#update-bar'), $updateContent = $updateBar.find('#update-content'), $contentContainer = $updateBar.find('#content-container'), - $buttonContainer = $updateBar.find('#button-container'), $iconContainer = $updateBar.find('#icon-container'), $closeIconContainer = $updateBar.find('#close-icon-container'), $heading = $updateBar.find('#heading'), $description = $updateBar.find('#description'), - $restart = $updateBar.find('#update-btn-restart'), - $later = $updateBar.find('#update-btn-later'), $closeIcon = $updateBar.find('#close-icon'); if ($updateContent.length > 0) { @@ -123,9 +99,6 @@ define(function (require, exports, module) { var resizeContentContainer = function () { if($updateContent.length > 0 && $contentContainer.length > 0 && $updateBar.length > 0) { var newWidth = $updateBar.outerWidth() - 38; - if($buttonContainer.length > 0) { - newWidth = newWidth- $buttonContainer.outerWidth(); - } if($iconContainer.length > 0) { newWidth = newWidth - $iconContainer.outerWidth(); } @@ -143,48 +116,12 @@ define(function (require, exports, module) { $(window).on('resize.AutoUpdateBar', _.debounce(resizeContentContainer, 150)); //Event handlers on the Update Bar - - // Click and key handlers on Restart button - if ($restart.length > 0) { - $restart.click(function () { - cleanUpdateBar(); - exports.trigger(exports.RESTART_BTN_CLICKED); - }); - - $restart.keyup(function (event) { - if (event.which === SPACE_KEY) { - $restart.trigger('click'); - } - }); - } - - // Click and key handlers on Later button - if ($later.length > 0) { - $later.click(function () { - cleanUpdateBar(); - MainViewManager.focusActivePane(); - exports.trigger(exports.LATER_BTN_CLICKED); - }); - - $later.keyup(function (event) { - if (event.which === SPACE_KEY) { - $later.trigger('click'); - } - }); - } - // Click and key handlers on Close button if ($closeIcon.length > 0) { $closeIcon.click(function () { cleanUpdateBar(); MainViewManager.focusActivePane(); }); - - $closeIcon.keyup(function (event) { - if (event.which === SPACE_KEY) { - $closeIcon.trigger('click'); - } - }); } $(window.document).on("keydown.AutoUpdate", function (event) { var code = event.which; @@ -197,6 +134,4 @@ define(function (require, exports, module) { }); } exports.showUpdateBar = showUpdateBar; - exports.RESTART_BTN_CLICKED = RESTART_BTN_CLICKED; - exports.LATER_BTN_CLICKED = LATER_BTN_CLICKED; }); From c977dfedd30c2ac4143ce3a9095cfcb03ae7d2f2 Mon Sep 17 00:00:00 2001 From: Gautam Jha Date: Sat, 9 Nov 2019 20:49:31 +0530 Subject: [PATCH 4/7] infobar is an independent unit --- src/brackets.js | 4 +- ...ar-template.html => infobar-template.html} | 6 +- src/styles/brackets_shared.less | 2 + src/styles/images/infobar-alert.svg | 10 ++ src/styles/images/infobar-checkmarkcircle.svg | 10 ++ src/styles/images/infobar-info.svg | 10 ++ src/styles/infobar-styles.less | 167 ++++++++++++++++++ src/widgets/{InfoBar.js => infobar.js} | 72 ++++---- 8 files changed, 240 insertions(+), 41 deletions(-) rename src/htmlContent/{infoBar-template.html => infobar-template.html} (50%) create mode 100644 src/styles/images/infobar-alert.svg create mode 100644 src/styles/images/infobar-checkmarkcircle.svg create mode 100644 src/styles/images/infobar-info.svg create mode 100644 src/styles/infobar-styles.less rename src/widgets/{InfoBar.js => infobar.js} (64%) diff --git a/src/brackets.js b/src/brackets.js index 8d8a6a52f9f..7629622cfd7 100644 --- a/src/brackets.js +++ b/src/brackets.js @@ -259,8 +259,8 @@ define(function (require, exports, module) { brackets.app.getRemoteDebuggingPort(function (err, remote_debugging_port){ if (remote_debugging_port && remote_debugging_port > 0) { - var InfoBar = require('widgets/InfoBar'); - InfoBar.showUpdateBar({ + var InfoBar = require('widgets/infobar'); + InfoBar.showInfoBar({ type: "warning", title: `${Strings.REMOTE_DEBUGGING_ENABLED} ${remote_debugging_port}`, description: "" diff --git a/src/htmlContent/infoBar-template.html b/src/htmlContent/infobar-template.html similarity index 50% rename from src/htmlContent/infoBar-template.html rename to src/htmlContent/infobar-template.html index 3dfc457d7c9..ab73c367b52 100644 --- a/src/htmlContent/infoBar-template.html +++ b/src/htmlContent/infobar-template.html @@ -1,9 +1,9 @@ -
+
- +
-

{{title}}  {{{description}}}

+

{{title}}  {{{description}}}

{{^buttons}}
diff --git a/src/styles/brackets_shared.less b/src/styles/brackets_shared.less index 7c7dd2cabcf..94665a160d8 100644 --- a/src/styles/brackets_shared.less +++ b/src/styles/brackets_shared.less @@ -57,3 +57,5 @@ // Styling for scrollbars @import url("brackets_scrollbars.less"); + +@import url("infobar-styles.less"); diff --git a/src/styles/images/infobar-alert.svg b/src/styles/images/infobar-alert.svg new file mode 100644 index 00000000000..2390583d92f --- /dev/null +++ b/src/styles/images/infobar-alert.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/src/styles/images/infobar-checkmarkcircle.svg b/src/styles/images/infobar-checkmarkcircle.svg new file mode 100644 index 00000000000..fc0706d5d99 --- /dev/null +++ b/src/styles/images/infobar-checkmarkcircle.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/src/styles/images/infobar-info.svg b/src/styles/images/infobar-info.svg new file mode 100644 index 00000000000..5b23b6491fd --- /dev/null +++ b/src/styles/images/infobar-info.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/src/styles/infobar-styles.less b/src/styles/infobar-styles.less new file mode 100644 index 00000000000..23986084354 --- /dev/null +++ b/src/styles/infobar-styles.less @@ -0,0 +1,167 @@ +/* + * Copyright (c) 2019 - present Adobe Systems Incorporated. All rights reserved. + * + * Permission is hereby granted, free of charge, to any person obtaining a + * copy of this software and associated documentation files (the "Software"), + * to deal in the Software without restriction, including without limitation + * the rights to use, copy, modify, merge, publish, distribute, sublicense, + * and/or sell copies of the Software, and to permit persons to whom the + * Software is furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING + * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER + * DEALINGS IN THE SOFTWARE. + * + */ + +/*info Bar*/ +#info-bar-template { + display: block; + background-color: #105F9C; + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.53); + height: 38px; + width: 100%; + position: absolute; + z-index: 15; + left: 0px; + bottom: 25px; + outline: none; + overflow: hidden; +} + +#info-bar-template #icon-container { + width: auto; + height: auto; + padding: 11px; + float: left; +} +#info-bar-template #icon-container #info-icon { + background: url("images/infobar-info.svg") no-repeat 0 0; + width: 16px; + height: 16px; + display: block; +} + +#info-bar-template #content-container { + padding: 10px 7px; + float: left; + max-width: 78%; +} + +#info-bar-template #content-container #info-content { + margin: 0px !important; /*Check if this important is necessary*/ + line-height: 18px; + font-size: 14px; + font-family: 'SourceSansPro'; + color: #FFFFFF; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +#info-bar-template #content-container #info-content #heading{ + font-weight: bold; +} +/*For focussed link of brackets.io*/ +#info-bar-template #content-container #info-content #description a:focus{ + box-shadow: none; +} + +#info-bar-template #content-container #info-content #description a{ + text-decoration: underline; + color: #FFFFFF; +} + +#info-bar-template #button-container { + display: block; + float: right; + right: 40px; + position: fixed; + background-color: #105F9C; + min-width: 180px; +} + +#info-bar-template #close-icon-container { + height: auto; + padding: 9px; + position: fixed; + float: right; + text-align: center; + width: auto; + min-width: 66px; + right: 30px; + background-color: #105F9C; +} + +#info-bar-template #close-icon-container #close-icon { + display: block; + color: white; + font-size: 18px; + line-height: 18px; + text-decoration: none; + width: 18px; + height: 18px; + background-color: transparent; + border: none; + padding: 0px; /*This is needed to center the icon*/ + float: right; +} + +#info-bar-template #close-icon-container #close-icon:hover { + background-color: rgba(255, 255, 255 ,0.16); + border-radius: 50%; +} + +#info-bar-template #close-icon-container #close-icon:focus { + background-color: rgba(255, 255, 255 ,0.16); + border-radius: 50%; + border: 1px solid #C3E3FF; + outline: 0; +} + +#info-bar-template #close-icon-container #close-icon:focus:active { + background-color: rgba(255, 255, 255 ,0.32); + border: none; +} + +/*Warning Message in info Bar*/ +#info-bar-template.warning, #info-bar-template.warning #close-icon-container { + background-color: #DA7A12; +} + +.dark #info-bar-template.warning, .dark #info-bar-template.warning #close-icon-container { + background-color: #E6851A; +} + +#info-bar-template.warning #icon-container #info-icon, +#info-bar-template.error #icon-container #info-icon { + background: url("images/infobar-alert.svg") no-repeat 0 0; +} + +/*Error message in info Bar*/ +#info-bar-template.error, #info-bar-template.error #close-icon-container { + background-color: #D7373F; +} + +.dark #info-bar-template.error, .dark #info-bar-template.error #close-icon-container{ + background-color: #E4484F; +} +/*Success message in info Bar*/ +#info-bar-template.success, #info-bar-template.success #close-icon-container { + background-color: #278E6B; +} + +.dark #info-bar-template.success, .dark #info-bar-template.success #close-icon-container { + background-color: #2E9D77; +} + +#info-bar-template.success #icon-container #info-icon{ + background: url("images/infobar-checkmarkcircle.svg") no-repeat 0 0; +} diff --git a/src/widgets/InfoBar.js b/src/widgets/infobar.js similarity index 64% rename from src/widgets/InfoBar.js rename to src/widgets/infobar.js index c8b4ec3b3c0..6f588b4b1b1 100644 --- a/src/widgets/InfoBar.js +++ b/src/widgets/infobar.js @@ -27,14 +27,15 @@ define(function (require, exports, module) { var MainViewManager = require("view/MainViewManager"), Mustache = require("thirdparty/mustache/mustache"), EventDispatcher = require("utils/EventDispatcher"), - UpdateBarHtml = require("text!htmlContent/infoBar-template.html"), + InfoBarHtml = require("text!htmlContent/infobar-template.html"), _ = require("thirdparty/lodash"); + //addLinkedStyleSheet('styles/infobar-styles.css'); + EventDispatcher.makeEventDispatcher(exports); // Key handlers for buttons in UI - var SPACE_KEY = 32, // keycode for space key - ESC_KEY = 27; // keycode for escape key + var ESC_KEY = 27; // keycode for escape key /** * Generates the json to be used by Mustache for rendering @@ -50,43 +51,42 @@ define(function (require, exports, module) { msgJsonObj.description = msgObj.description; return msgJsonObj; } - /** - * Removes and cleans up the update bar from DOM + * Removes and cleans up the info bar from DOM */ - function cleanUpdateBar() { - var $updateBar = $('#update-bar'); - if ($updateBar.length > 0) { - $updateBar.remove(); + function cleanInfoBar() { + var $infoBar = $('#info-bar-template'); + if ($infoBar.length > 0) { + $infoBar.remove(); } - $(window.document).off("keydown.AutoUpdate"); - $(window).off('resize.AutoUpdateBar'); + $(window.document).off("keydown.AutoInfo"); + $(window).off('resize.AutoInfoBar'); } /** - * Displays the Update Bar UI + * Displays the Info Bar UI * @param {object} msgObj - json object containing message info to be displayed * */ - function showUpdateBar(msgObj) { + function showInfoBar(msgObj) { var jsonToMustache = generateJsonForMustache(msgObj), - $updateBarElement = $(Mustache.render(UpdateBarHtml, jsonToMustache)); + $infoBarElement = $(Mustache.render(InfoBarHtml, jsonToMustache)); - cleanUpdateBar(); //Remove an already existing update bar, if any - $updateBarElement.prependTo(".content"); + cleanInfoBar(); //Remove an already existing info bar, if any + $infoBarElement.prependTo(".content"); - var $updateBar = $('#update-bar'), - $updateContent = $updateBar.find('#update-content'), - $contentContainer = $updateBar.find('#content-container'), - $iconContainer = $updateBar.find('#icon-container'), - $closeIconContainer = $updateBar.find('#close-icon-container'), - $heading = $updateBar.find('#heading'), - $description = $updateBar.find('#description'), - $closeIcon = $updateBar.find('#close-icon'); + var $infoBar = $('#info-bar-template'), + $infoContent = $infoBar.find('#info-content'), + $contentContainer = $infoBar.find('#content-container'), + $iconContainer = $infoBar.find('#icon-container'), + $closeIconContainer = $infoBar.find('#close-icon-container'), + $heading = $infoBar.find('#heading'), + $description = $infoBar.find('#description'), + $closeIcon = $infoBar.find('#close-icon'); - if ($updateContent.length > 0) { - if ($updateContent[0].scrollWidth > $updateContent.innerWidth()) { - //Text has over-flown, show the update content as tooltip message + if ($infoContent.length > 0) { + if ($infoContent[0].scrollWidth > $infoContent.innerWidth()) { + //Text has over-flown, show the info content as tooltip message if ($contentContainer.length > 0 && $heading.length > 0 && $description.length > 0) { @@ -97,8 +97,8 @@ define(function (require, exports, module) { // Content Container Width between Icon Container and Button Container or Close Icon Container // will be assigned when window will be rezied. var resizeContentContainer = function () { - if($updateContent.length > 0 && $contentContainer.length > 0 && $updateBar.length > 0) { - var newWidth = $updateBar.outerWidth() - 38; + if($infoContent.length > 0 && $contentContainer.length > 0 && $infoBar.length > 0) { + var newWidth = $infoBar.outerWidth() - 38; if($iconContainer.length > 0) { newWidth = newWidth - $iconContainer.outerWidth(); } @@ -113,25 +113,25 @@ define(function (require, exports, module) { }; resizeContentContainer(); - $(window).on('resize.AutoUpdateBar', _.debounce(resizeContentContainer, 150)); + $(window).on('resize.AutoInfoBar', _.debounce(resizeContentContainer, 150)); - //Event handlers on the Update Bar + //Event handlers on the Info Bar // Click and key handlers on Close button if ($closeIcon.length > 0) { $closeIcon.click(function () { - cleanUpdateBar(); + cleanInfoBar(); MainViewManager.focusActivePane(); }); } - $(window.document).on("keydown.AutoUpdate", function (event) { + $(window.document).on("keydown.AutoInfo", function (event) { var code = event.which; if (code === ESC_KEY) { - // Keyboard input of Esc key on Update Bar dismisses and removes the bar - cleanUpdateBar(); + // Keyboard input of Esc key on Info Bar dismisses and removes the bar + cleanInfoBar(); MainViewManager.focusActivePane(); event.stopImmediatePropagation(); } }); } - exports.showUpdateBar = showUpdateBar; + exports.showInfoBar = showInfoBar; }); From 8677756aa443b98523852f86bfcbfc1a77d93478 Mon Sep 17 00:00:00 2001 From: Gautam Jha Date: Sat, 9 Nov 2019 20:52:20 +0530 Subject: [PATCH 5/7] Changed getRemoteDebuggingPort usage --- src/document/DocumentCommandHandlers.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/document/DocumentCommandHandlers.js b/src/document/DocumentCommandHandlers.js index ed875376d9f..fff0cecb37e 100644 --- a/src/document/DocumentCommandHandlers.js +++ b/src/document/DocumentCommandHandlers.js @@ -1642,7 +1642,8 @@ define(function (require, exports, module) { if (brackets.inBrowser) { result.resolve(); } else { - var port = brackets.app.getRemoteDebuggingPort ? brackets.app.getRemoteDebuggingPort() : 9234; + brackets.app.getRemoteDebuggingPort(function (err, port){ + if (port && port > 0) { Inspector.getDebuggableWindows("127.0.0.1", port) .fail(result.reject) .done(function (response) { @@ -1664,6 +1665,8 @@ define(function (require, exports, module) { // In case of an error _socket.onerror = result.reject; }); + } + }); } return result.promise(); From 29c08d236398477937a71553843297a1de007220 Mon Sep 17 00:00:00 2001 From: Gautam Jha Date: Mon, 11 Nov 2019 12:10:15 +0530 Subject: [PATCH 6/7] Addressing review comments --- src/document/DocumentCommandHandlers.js | 46 ++++++++++++------------- src/styles/infobar-styles.less | 9 ----- src/widgets/infobar.js | 14 ++++---- 3 files changed, 29 insertions(+), 40 deletions(-) diff --git a/src/document/DocumentCommandHandlers.js b/src/document/DocumentCommandHandlers.js index fff0cecb37e..bb0889d1844 100644 --- a/src/document/DocumentCommandHandlers.js +++ b/src/document/DocumentCommandHandlers.js @@ -1643,29 +1643,29 @@ define(function (require, exports, module) { result.resolve(); } else { brackets.app.getRemoteDebuggingPort(function (err, port){ - if (port && port > 0) { - Inspector.getDebuggableWindows("127.0.0.1", port) - .fail(result.reject) - .done(function (response) { - var page = response[0]; - if (!page || !page.webSocketDebuggerUrl) { - result.reject(); - return; - } - var _socket = new WebSocket(page.webSocketDebuggerUrl); - // Disable the cache - _socket.onopen = function _onConnect() { - _socket.send(JSON.stringify({ id: 1, method: "Network.setCacheDisabled", params: { "cacheDisabled": true } })); - }; - // The first message will be the confirmation => disconnected to allow remote debugging of Brackets - _socket.onmessage = function _onMessage(e) { - _socket.close(); - result.resolve(); - }; - // In case of an error - _socket.onerror = result.reject; - }); - } + if (port && port > 0) { + Inspector.getDebuggableWindows("127.0.0.1", port) + .fail(result.reject) + .done(function (response) { + var page = response[0]; + if (!page || !page.webSocketDebuggerUrl) { + result.reject(); + return; + } + var _socket = new WebSocket(page.webSocketDebuggerUrl); + // Disable the cache + _socket.onopen = function _onConnect() { + _socket.send(JSON.stringify({ id: 1, method: "Network.setCacheDisabled", params: { "cacheDisabled": true } })); + }; + // The first message will be the confirmation => disconnected to allow remote debugging of Brackets + _socket.onmessage = function _onMessage(e) { + _socket.close(); + result.resolve(); + }; + // In case of an error + _socket.onerror = result.reject; + }); + } }); } diff --git a/src/styles/infobar-styles.less b/src/styles/infobar-styles.less index 23986084354..246cda67b77 100644 --- a/src/styles/infobar-styles.less +++ b/src/styles/infobar-styles.less @@ -79,15 +79,6 @@ color: #FFFFFF; } -#info-bar-template #button-container { - display: block; - float: right; - right: 40px; - position: fixed; - background-color: #105F9C; - min-width: 180px; -} - #info-bar-template #close-icon-container { height: auto; padding: 9px; diff --git a/src/widgets/infobar.js b/src/widgets/infobar.js index 6f588b4b1b1..4a266d63332 100644 --- a/src/widgets/infobar.js +++ b/src/widgets/infobar.js @@ -27,10 +27,8 @@ define(function (require, exports, module) { var MainViewManager = require("view/MainViewManager"), Mustache = require("thirdparty/mustache/mustache"), EventDispatcher = require("utils/EventDispatcher"), - InfoBarHtml = require("text!htmlContent/infobar-template.html"), - _ = require("thirdparty/lodash"); - - //addLinkedStyleSheet('styles/infobar-styles.css'); + InfoBarHtml = require("text!htmlContent/infobar-template.html"), + _ = require("thirdparty/lodash"); EventDispatcher.makeEventDispatcher(exports); @@ -59,8 +57,8 @@ define(function (require, exports, module) { if ($infoBar.length > 0) { $infoBar.remove(); } - $(window.document).off("keydown.AutoInfo"); - $(window).off('resize.AutoInfoBar'); + $(window.document).off("keydown.InfoBarTemplateDoc"); + $(window).off('resize.InfoBarTemplate'); } /** @@ -113,7 +111,7 @@ define(function (require, exports, module) { }; resizeContentContainer(); - $(window).on('resize.AutoInfoBar', _.debounce(resizeContentContainer, 150)); + $(window).on('resize.InfoBarTemplate', _.debounce(resizeContentContainer, 150)); //Event handlers on the Info Bar // Click and key handlers on Close button @@ -123,7 +121,7 @@ define(function (require, exports, module) { MainViewManager.focusActivePane(); }); } - $(window.document).on("keydown.AutoInfo", function (event) { + $(window.document).on("keydown.InfoBarTemplateDoc", function (event) { var code = event.which; if (code === ESC_KEY) { // Keyboard input of Esc key on Info Bar dismisses and removes the bar From a05057d5e8d78753c634a271ddf9371f63bc5b1c Mon Sep 17 00:00:00 2001 From: Gautam Jha Date: Mon, 11 Nov 2019 14:55:01 +0530 Subject: [PATCH 7/7] Updating infobar message --- src/nls/root/strings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index b0146f07329..7f7646b8804 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -900,5 +900,5 @@ define({ "CMD_FIND_PROJECT_SYMBOLS" : "Find Project Symbols", // Remote debugging enabled - "REMOTE_DEBUGGING_ENABLED" : "Remote Debugging Enabled on Port:" + "REMOTE_DEBUGGING_ENABLED" : "Remote debugging enabled on localhost:" });