Adding infobar for remote debugging enabled

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.showInfoBar({
+                    type: "warning",
+                    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.

src/document/DocumentCommandHandlers.js

@@ -1642,28 +1642,31 @@ define(function (require, exports, module) {
         if (brackets.inBrowser) {
             result.resolve();
         } else {
-            var port = brackets.app.getRemoteDebuggingPort ? brackets.app.getRemoteDebuggingPort() : 9234;
-            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;
-                });
+            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;
+                        });
+                }
+            });
         }
 
         return result.promise();

src/htmlContent/infobar-template.html

@@ -0,0 +1,13 @@
+<div id="info-bar-template" {{#type}}class={{{type}}}{{/type}} tabindex="0">
+    <div id="icon-container">
+        <svg id="info-icon"> </svg>
+    </div>
+    <div id="content-container">
+        <p id="info-content"><span id="heading">{{title}}</span>&nbsp;&nbsp;<span id="description">{{{description}}}</span></p>
+    </div>
+    {{^buttons}}
+    <div id="close-icon-container">
+        <button type="button" id="close-icon" tabIndex="0">&times;</button>
+    </div>
+    {{/buttons}}
+</div>

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 localhost:"
 });

src/styles/brackets_shared.less

@@ -57,3 +57,5 @@
 
 // Styling for scrollbars
 @import url("brackets_scrollbars.less");
+
+@import url("infobar-styles.less");

src/styles/infobar-styles.less

@@ -0,0 +1,158 @@
+/*
+ * 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 #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;
+}