fix: problem should hover along with number dials if both present

Author: abose

src/extensions/default/QuickView/numberPreviewProvider.js

@@ -203,19 +203,20 @@ define(function (require, exports, module) {
 
     function filterQuickView(popovers){
         // rgb(10 , 100, 20), hover over these kind of numbers should open color quick view if present over number view
-        let numberQuickView, colorQuickView;
+        let hasColorQuickView = false;
         for(let popover of popovers){
-            if(popover.providerInfo.provider.QUICK_VIEW_NAME === exports.QUICK_VIEW_NAME){
-                numberQuickView = popover;
-            } else if(popover.providerInfo.provider.QUICK_VIEW_NAME === colorGradientProvider.QUICK_VIEW_NAME){
-                colorQuickView = popover;
+            if(popover.providerInfo.provider.QUICK_VIEW_NAME === colorGradientProvider.QUICK_VIEW_NAME){
+                hasColorQuickView = true;
+                break;
             }
         }
-        if(colorQuickView){
-            return [colorQuickView];
+        if(hasColorQuickView){
+            popovers = popovers.filter((popover) => {
+                return popover.providerInfo.provider.QUICK_VIEW_NAME !== exports.QUICK_VIEW_NAME;
+            });
         }
 
-        return [numberQuickView] || popovers;
+        return popovers;
     }
 
     prefs.on("change", PREF_ENABLED_KEY, function () {

src/features/QuickViewManager.js

@@ -363,7 +363,8 @@ define(function (require, exports, module) {
                 content: $("<div id='quick-view-popover-root'></div>")
             };
             // Each provider return popover { start, end, content}
-            for(let result of popoverResults){
+            for(let i=0; i<popoverResults.length; i++) {
+                const result = popoverResults[i];
                 if(_isResultBeforePopoverStart(editor, popover, result)){
                     popover.start = result.start;
                 }
@@ -373,7 +374,11 @@ define(function (require, exports, module) {
                 if(result.editsDoc){
                     popover.editsDoc = true;
                 }
-                popover.content.append(result.content);
+                let cssClass = `class='quick-view-partition'`;
+                if(i === (popoverResults.length - 1)) {
+                    cssClass = "";
+                }
+                popover.content.append($(`<div ${cssClass} ></div>`).append(result.content));
             }
 
             let startCoord = editor.charCoords(popover.start),

src/language/CodeInspection.js

@@ -532,8 +532,6 @@ define(function (require, exports, module) {
             for (let resultProvider of resultProviderEntries) {
                 let errors = (resultProvider.result && resultProvider.result.errors) || [];
                 for (let error of errors) {
-                    // todo: add error.message on hover
-                    // add gutter markers
                     let line = error.pos.line || 0;
                     let ch = error.pos.ch || 0;
                     let gutterMessage = gutterErrorMessages[line] || [];

src/styles/brackets.less

@@ -152,35 +152,67 @@ html, body {
 }
 
 .editor-text-fragment-error{
-    text-decoration-style: wavy;
-    text-decoration-line: underline;
-    text-decoration-color: @error-underline-text;
-    text-decoration-thickness: 1px;
-    text-decoration-skip-ink: none;
+    border-bottom:2px dotted @error-underline-text;
+    display: inline-block;
+    position: relative;
+}
+
+.editor-text-fragment-error:after{
+    content: '';
+    width: 100%;
+    border-bottom:2px dotted @error-underline-text;
+    position: absolute;
+    display:block;
+    bottom: -3px;
+    left: 2px;
 }
 
 .editor-text-fragment-warn{
-    text-decoration-style: wavy;
-    text-decoration-line: underline;
-    text-decoration-color: @warn-underline-text;
-    text-decoration-thickness: 1px;
-    text-decoration-skip-ink: none;
+    border-bottom:2px dotted @warn-underline-text;
+    display: inline-block;
+    position: relative;
+}
+
+.editor-text-fragment-warn:after{
+    content: '';
+    width: 100%;
+    border-bottom:2px dotted @warn-underline-text;
+    position: absolute;
+    display:block;
+    bottom: -3px;
+    left: 2px;
 }
 
 .editor-text-fragment-info{
-    text-decoration-style: dashed;
-    text-decoration-line: underline;
-    text-decoration-color: @info-underline-text;
-    text-decoration-thickness: 1px;
-    text-decoration-skip-ink: none;
+    border-bottom:2px dotted @info-underline-text;
+    display: inline-block;
+    position: relative;
+}
+
+.editor-text-fragment-info:after{
+    content: '';
+    width: 100%;
+    border-bottom:2px dotted @info-underline-text;
+    position: absolute;
+    display:block;
+    bottom: -3px;
+    left: 2px;
 }
 
 .editor-text-fragment-spell-error{
-    text-decoration-style: wavy;
-    text-decoration-line: underline;
-    text-decoration-color: @spell-underline-text;
-    text-decoration-thickness: 1px;
-    text-decoration-skip-ink: none;
+    border-bottom:2px dotted @spell-underline-text;
+    display: inline-block;
+    position: relative;
+}
+
+.editor-text-fragment-spell-error:after{
+    content: '';
+    width: 100%;
+    border-bottom:2px dotted @spell-underline-text;
+    position: absolute;
+    display:block;
+    bottom: -3px;
+    left: 2px;
 }
 
 .hidden-element{
@@ -1940,6 +1972,15 @@ a, img {
     }
 }
 
+.quick-view-partition {
+    border-bottom: 2px solid @bc-quick-view-separator;
+    .dark & {
+        border-bottom: 2px solid @dark-bc-quick-view-separator;
+    }
+    padding-bottom: 5px;
+    margin-bottom: 5px;
+}
+
 #quick-view-container.active {
     transform: scale(1);
     opacity: 1;

src/styles/brackets_core_ui_variables.less

@@ -147,6 +147,10 @@
 @bc-codehint-desc-type-details: #1473e6;
 @bc-codehint-desc-documentation:#424242;
 
+// quick view
+@bc-quick-view-separator:            #c3c6c5;
+@dark-bc-quick-view-separator:       #505050;
+
 /* Dark Core UI variables -----------------------------------------------------------------------------*/
 
 // General