diff --git a/src/extensions/default/CodeFolding/main.less b/src/extensions/default/CodeFolding/main.less index d667b91ae3..541fdcc913 100644 --- a/src/extensions/default/CodeFolding/main.less +++ b/src/extensions/default/CodeFolding/main.less @@ -1,4 +1,4 @@ -@font-size: 1.1em; +@font-size: 1em; @color-triangle: #ccc; @color-triangle-mouseover: #aaa; @color-triangle-collapsed: #999; diff --git a/src/extensionsIntegrated/CSSColorPreview/main.js b/src/extensionsIntegrated/CSSColorPreview/main.js index 95058f2450..3891faa4d5 100644 --- a/src/extensionsIntegrated/CSSColorPreview/main.js +++ b/src/extensionsIntegrated/CSSColorPreview/main.js @@ -30,13 +30,17 @@ define(function (require, exports, module) { EditorManager = require('editor/EditorManager'), ColorUtils = require('utils/ColorUtils'), AppInit = require("utils/AppInit"), + Editor = require("editor/Editor").Editor, PreferencesManager = require("preferences/PreferencesManager"), MainViewManager = require("view/MainViewManager"), Strings = require("strings"); // Extension variables. const COLOR_REGEX = ColorUtils.COLOR_REGEX, // used to match color - gutterName = "CodeMirror-colorGutter"; + GUTTER_NAME = "CodeMirror-colorGutter", + COLOR_PREVIEW_GUTTER_PRIORITY = 200, + COLOR_LANGUAGES= ["css", "scss", "less", "sass", "stylus", "html", "svg", "jsx", "tsx", + "php", "ejs", "erb_html", "pug"]; // For preferences settings, to toggle this feature on/off @@ -101,10 +105,7 @@ define(function (require, exports, module) { const editor = EditorManager.getActiveEditor(); if (editor) { - - const aColors = _getAllColorsAndLineNums(editor); - showGutters(editor, aColors); - + showGutters(editor, _getAllColorsAndLineNums(editor)); } } @@ -115,16 +116,13 @@ define(function (require, exports, module) { * CssColorPreview preference and set it to true */ function addColorMarksToAllEditors() { - const allActiveEditors = MainViewManager.getAllViewedEditors(); allActiveEditors.forEach((activeEditor) => { const currEditor = activeEditor.editor; if(currEditor) { - const aColors = _getAllColorsAndLineNums(currEditor); showGutters(currEditor, aColors); - } }); } @@ -139,8 +137,7 @@ define(function (require, exports, module) { allActiveEditors.forEach((activeEditor) => { const currEditor = activeEditor.editor; if(currEditor) { - const cm = currEditor._codeMirror; - cm.clearGutter(gutterName); + currEditor.clearGutter(GUTTER_NAME); } }); } @@ -155,7 +152,8 @@ define(function (require, exports, module) { if (editor && enabled) { initGutter(editor); const cm = editor._codeMirror; - cm.clearGutter(gutterName); // clear color markers + editor.clearGutter(GUTTER_NAME); // clear color markers + _addDummyGutterMarkerIfNotExist(editor, editor.getCursorPos().line); // Only add markers if enabled if (enabled) { @@ -170,7 +168,7 @@ define(function (require, exports, module) { .addClass("ico-cssColorPreview") .css('background-color', obj.colorValues[0]); - cm.setGutterMarker(obj.lineNumber, gutterName, $marker[0]); + editor.setGutterMarker(obj.lineNumber, GUTTER_NAME, $marker[0]); } else { // Multiple colors preview $marker = $("
").addClass("ico-multiple-cssColorPreview"); @@ -195,7 +193,7 @@ define(function (require, exports, module) { } }); - cm.setGutterMarker(obj.lineNumber, gutterName, $marker[0]); + editor.setGutterMarker(obj.lineNumber, GUTTER_NAME, $marker[0]); } }); } @@ -209,16 +207,27 @@ define(function (require, exports, module) { * @param {activeEditor} editor */ function initGutter(editor) { + if (!Editor.isGutterRegistered(GUTTER_NAME)) { + // we should restrict the languages here to Editor.registerGutter(..., ["css", "less", "scss", etc..]); + // TODO we should show the gutter in those languages only if a color is present in that file. + Editor.registerGutter(GUTTER_NAME, COLOR_PREVIEW_GUTTER_PRIORITY, COLOR_LANGUAGES); + } + } - const cm = editor._codeMirror; - const gutters = cm.getOption("gutters").slice(0); - let str = gutters.join(''); - if (str.indexOf(gutterName) === -1) { - gutters.unshift(gutterName); - cm.setOption("gutters", gutters); + function _addDummyGutterMarkerIfNotExist(editor, line) { + let marker = editor.getGutterMarker(line, GUTTER_NAME); + if(!marker){ + let $marker = $('
') + .addClass(GUTTER_NAME); + editor.setGutterMarker(line, GUTTER_NAME, $marker[0]); } } + function _cursorActivity(_evt, editor){ + // this is to prevent a gutter gap in the active line if there is no color on this line. + _addDummyGutterMarkerIfNotExist(editor, editor.getCursorPos().line); + } + /** * Register all the required handlers */ @@ -229,6 +238,9 @@ define(function (require, exports, module) { // Add listener for all editor changes EditorManager.on("activeEditorChange", function (event, newEditor, oldEditor) { if (newEditor) { + // todo: only attach if the color gutter is present as we disable it in certain languages + newEditor.off("cursorActivity.colorPreview"); + newEditor.on("cursorActivity.colorPreview", _cursorActivity); // Unbind the previous editor's change event if it exists if (oldEditor) { const oldCM = oldEditor._codeMirror; diff --git a/src/styles/Extn-CSSColorPreview.less b/src/styles/Extn-CSSColorPreview.less index f97481615f..f0f4fe414b 100644 --- a/src/styles/Extn-CSSColorPreview.less +++ b/src/styles/Extn-CSSColorPreview.less @@ -1,6 +1,13 @@ // These styles are for CssColorPreview feature // Check `extensionsIntegrated/CSSColorPreview for more reference /* Single color preview */ + +.CodeMirror .CodeMirror-colorGutter { + width: 1em; + background-color: transparent; + text-align: center; +} + .ico-cssColorPreview { border: solid 1px rgba(255, 255, 255, 0.2); .dark & { @@ -10,28 +17,26 @@ top: .1em; height:.7em; width: .7em; - margin-left: .15em; position: relative; } /* Multiple colors preview container (this is a div) */ .ico-multiple-cssColorPreview { - border: solid 1px rgba(255, 255, 255, 0.2); + border: solid .05em rgba(255, 255, 255, 0.2); .dark & { - border: solid 1px rgba(0, 0, 0, 0.2); + border: solid .05em rgba(0, 0, 0, 0.2); } position: relative; display: inline-block; - top: .1em; - width: .7em; - height:.7em; - margin-left: .15em; + top: .2em; + width: .9em; + height:.9em; } /* For individual color boxes, they will be added inside the main .ico-multiple-cssColorPreview div */ .ico-multiple-cssColorPreview .color-box { position: absolute; - width: .3em; - height: .3em; + width: .4em; + height: .4em; box-sizing: border-box; } diff --git a/src/styles/brackets.less b/src/styles/brackets.less index aaa95114b9..9b7a520ed3 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -2962,6 +2962,7 @@ textarea.exclusions-editor { .CodeMirror .code-inspection-gutter { width: 1em; background-color: transparent; + text-align: center; } .brackets-inspection-gutter-marker { @@ -2970,7 +2971,7 @@ textarea.exclusions-editor { line-height: 1em; height: 1em; width: 1em; - font-size: .8em; + font-size: .7em; pointer-events: auto; } diff --git a/test/spec/Editor-test.js b/test/spec/Editor-test.js index e961139db2..1a727b94d3 100644 --- a/test/spec/Editor-test.js +++ b/test/spec/Editor-test.js @@ -2084,7 +2084,8 @@ define(function (require, exports, module) { var leftGutter = "left", rightGutter = "right", lineNumberGutter = "CodeMirror-linenumbers", - codeInspectionGutter = "code-inspection-gutter"; + codeInspectionGutter = "code-inspection-gutter", + colorGutter = "CodeMirror-colorGutter"; beforeEach(function () { createTestEditor("hello\nworld\nyo", "javascript"); @@ -2110,7 +2111,7 @@ define(function (require, exports, module) { return gutter.name; }); expect(gutters).toEqual(expectedGutters); - expect(registeredGutters).toEqual([...expectedGutters, codeInspectionGutter]); + expect(registeredGutters).toEqual([...expectedGutters, colorGutter, codeInspectionGutter]); }); it("should isGutterRegistered work on multiple gutters", function () { @@ -2124,19 +2125,25 @@ define(function (require, exports, module) { var secondRightGutter = "second-right"; Editor.registerGutter(secondRightGutter, 101); var expectedGutters = [leftGutter, lineNumberGutter, rightGutter, secondRightGutter]; - var gutters = myEditor._codeMirror.getOption("gutters"); + var guttersInEditor = myEditor._codeMirror.getOption("gutters"); var registeredGutters = Editor.getRegisteredGutters().map(function (gutter) { return gutter.name; }); - expect(gutters).toEqual(expectedGutters); - expect(registeredGutters).toEqual(expectedGutters); + // registered color gutter is disabled in javascript files + expect(guttersInEditor.includes(colorGutter)).toBeFalse(); + expect(registeredGutters.includes(colorGutter)).toBeTrue(); + const allNonColorRegisteredGutters = registeredGutters.filter(function (gutter) { + return gutter !== colorGutter; + }); + expect(guttersInEditor).toEqual(expectedGutters); + expect(allNonColorRegisteredGutters).toEqual(expectedGutters); }); it("should have only gutters registered with the intended languageIds ", function () { var lessOnlyGutter = "less-only-gutter"; Editor.registerGutter(lessOnlyGutter, 101, ["less"]); var expectedGutters = [leftGutter, lineNumberGutter, rightGutter]; - var expectedRegisteredGutters = [leftGutter, lineNumberGutter, rightGutter, lessOnlyGutter]; + var expectedRegisteredGutters = [leftGutter, lineNumberGutter, rightGutter, lessOnlyGutter, colorGutter]; var gutters = myEditor._codeMirror.getOption("gutters"); var registeredGutters = Editor.getRegisteredGutters().map(function (gutter) { return gutter.name; @@ -2150,12 +2157,12 @@ define(function (require, exports, module) { Editor.unregisterGutter(rightGutter); Editor.registerGutter(leftGutter, 1); var expectedGutters = [leftGutter, lineNumberGutter]; - var gutters = myEditor._codeMirror.getOption("gutters"); + var guttersInEditor = myEditor._codeMirror.getOption("gutters"); var registeredGutters = Editor.getRegisteredGutters().map(function (gutter) { return gutter.name; }); - expect(gutters).toEqual(expectedGutters); - expect(registeredGutters).toEqual(expectedGutters); + expect(guttersInEditor).toEqual(expectedGutters); // js files dont have color gutter + expect(registeredGutters).toEqual([...expectedGutters, colorGutter]); }); it("should set gutter marker correctly", function () {