#7276 Live Preview highlight customization #12949

Worie · 2016-11-27T18:33:22Z

Live Preview highlight customization (colors of highlight can be customized via user preferences)

I needed to easly customize the highlight color of Live Preview - and I've achieved it with the changes in the PR. I'm not sure if that's the desired way of doing so, as this is my first PR to Brackets.

RemoteFunctions takes whole config as a parameter instead just "experimental" flag.
There's a preference in which user can define desired styling of highlightning.
The view is updated when preferences change without breaking live dev session.
If no user preferences are defined, the default configuration is used.

It also implements #7276 -> Preview of Live Preview with margins and paddings showing

petetnt

Nice work @Worie! Added some small comments.

Might require a test too.

petetnt · 2016-11-27T22:58:19Z

src/LiveDevelopment/Agents/RemoteAgent.js

-        // inject RemoteFunctions
-        var command = "window._LD=" + RemoteFunctions + "(" + LiveDevelopment.config.experimental + ");";
-
+


Nit: trailing whitespace

petetnt · 2016-11-27T22:59:12Z

src/LiveDevelopment/main.js

+    // "livedev.remoteHighlight" preference
+    var PREF_REMOTEHIGHLIGHT = "remoteHighlight";
+    var remoteHighlightPref = prefs.definePreference(PREF_REMOTEHIGHLIGHT, "object", {
+        "animateStartValue": {


nit: Keys don't need to be quoted

petetnt · 2016-11-27T23:02:46Z

src/LiveDevelopment/Agents/RemoteFunctions.js

@@ -268,16 +269,17 @@ function RemoteFunctions(experimental) {
                "box-shadow": "0 0 1px #fff",
                "box-sizing": "border-box"
            };
+
+            var preferences = config.remoteHighlight.stylesToSet;


You can use Object.assign here to simplify the merging:

var mergedStyles = Object.assign({}, stylesToSet, config.remoteHighlight.stylesToSet)

and then later use mergedStyles instead of stylesToSet

petetnt · 2016-11-27T23:03:07Z

src/LiveDevelopment/Agents/RemoteAgent.js

+        
+        // inject RemoteFunction
+        var command = "window._LD=" + RemoteFunctions + "(" + JSON.stringify(LiveDevelopment.config) + ");";
+        


Nit: trailing whitespace

Worie · 2016-11-28T09:46:22Z

Thanks @petetnt ! I've applied the changes you mentioned. Unfortunetly it seems like I've broken the test, as Debug -> Run tests throws Uncaught TypeError: Cannot read property 'experimental' of undefined in SpecRunner.html:36 . I can't investigate on it now, though.

Also it looks like I've closed this PR 3 hours ago, is it automated process or did i just close it by accident?

petetnt · 2016-11-28T09:48:50Z

These closing is not an automated process, I guess you closed it by accident but that's no biggie 👍

I can help you out with debugging the test failures in a while so we can land this 👍

petetnt · 2016-11-28T22:14:52Z

src/LiveDevelopment/Agents/RemoteFunctions.js


            var transitionValues = {
-                "-webkit-transition-property": "opacity, background-color",
+                "-webkit-transition-property": "opacity, background-color, transform",


I think we don't need to support the prefixed ones anymore

Worie · 2016-11-29T11:56:06Z

It isn't pushed yet, but I've created updateConfig function in RemoteFunctions.js so the changes in the brackets.json could be loaded to current LiveDev session.

Also I'd like to try to implement #7276 in my free time, as I think it is an awesome case and it could play well with changes made in this PR.

Edit: pushed

ficristo · 2016-11-29T18:29:53Z

src/LiveDevelopment/Agents/RemoteFunctions.js

@@ -268,21 +269,15 @@ function RemoteFunctions(experimental) {
                "box-shadow": "0 0 1px #fff",
                "box-sizing": "border-box"
            };
+
+            var mergedStyles = Object.assign({}, stylesToSet,  config.remoteHighlight.stylesToSet);


I think Object.assign is not available on Linux (which uses Chrome 29). You could try to use lodash assign or extend instead.

Argh, you are right @ficristo. The age old Linux version is starting to become the IE8 of Brackets 😭

Those are remote functions, so I cannot use _.assign there I guess until i inject it to the browser. Am I right?

I've left it as Object.assign, just for now - until I know what exactly am I supposed to do.

Actually as they are remote functions that are run on the browser, we can just use Object.assign right?

You mean a real browser and not Brackets itself, right? (Not much familiar with LivePreview)
Then I suppose we can use Object.assign. Sorry for the noise...

I cant test it on Linux, but it works well on OSX. Edit: Yeah, those are run in real browser.

Worie · 2016-11-30T10:28:08Z

Preview of Live Preview with margins and paddings showing

So, I've done it :) If user did not specify his own preferences, it looks as designed in #7276 . Also changing those values does not break current Live Development session.

You can also turn showing the margins/paddings by changing value of the flag showMarginPadding in preferences. Probably this could be hooked to some keyboard shortcut.

I could probably add one condition to check if there's any padding, so there wont be any borders showing when padding value is equal to 0 or something.

And the tests... Yeah.

petetnt · 2016-12-06T21:10:38Z

src/LiveDevelopment/Agents/RemoteFunctions.js

+            var calculateSize = function () {
+                var sum = 0;
+                var i;
+                for (i = 0; i < arguments.length; i++) {


Not a huge one of using arguments, can we instead pass an array and loop through that (with Array.prototype.reduce for example?)

var calculateSize = function (values) { return values.reduce(function (val) { return parseInt(val, 10); }, 0); };

(Side note, I wish we could use ES2015 so this would be just const calculateSize = (values) => values.reduce(val => parseInt(val, 10), 0) 😸)

calculateSize should probably return value in pixels too instead of using string concat on every use.

petetnt · 2016-12-06T21:13:03Z

src/LiveDevelopment/Agents/RemoteFunctions.js

+
+            var mainBoxStyles = config.remoteHighlight.stylesToSet;
+
+            var paddingVisualisations = [


Not sure if these would be better in their own file, for example RemoteVisualizationUtils for example?

Hmm, but RemoteFunctions are being injected into the browser (window._LD) and those values are calculated basing on the element that is highlighted there... I'm not sure how that sould work - how to access another file from there? Can't imagine this atm.

Or perhaps i simply didn't understand what you meant :)

Yeah my bad, I was thinking about making it an utility file of methods that get passed to that injected method but it most likely won't work like that nor would be worth it. Feel free to disregard 👍

Worie · 2016-12-16T10:20:07Z

Realized that elements that have css transition on them act a bit buggy (margins and paddings do not animate, and it causes that you have to wait for the transition to finish, then re-select this specific node to see changes), perhaps I'll do something about it next week, we'll see.

But still, i have no idea how to get into fixing those tests - any help would be awesome, even pointing to some specific files or anything. :)

ficristo · 2016-12-16T19:21:02Z

If you open Chrome at http://localhost:9234/, after clicked Debug \ Run Tests, there are two errors Uncaught TypeError: Cannot read property 'experimental' of undefined.
Their stack trace point to:
spec/HTMLInstrumentation-test.js:40
spec/RemoteFunctions-test.js:33

petetnt

Few more small comments. Nice work so far 👍

petetnt · 2016-12-19T18:10:49Z

src/LiveDevelopment/Agents/RemoteFunctions.js

    var lastKeepAliveTime = Date.now();
+	var req, timeout;


This commit has tabs, while we prefer/enforce 4 spaces. You can easily change them with the brackets-eslint extension by right clicking the editor and selecting Autofix with ESLint

petetnt · 2016-12-19T18:12:32Z

src/LiveDevelopment/Agents/RemoteFunctions.js

+
+		var animationDuration = parseFloat(styles.getPropertyValue('animation-duration'));
+
+		if (transitionDuration)


Nit: IIRC we prefer to have braces on single line ifs too:

if (transitionDuration) { animateHighlight(transitionDuration); } if (animationDuration) { animateHighlight(animationDuration); }

Yeah, I do too. I have no idea why did i write it like so. Thanks!

petetnt · 2016-12-19T18:13:08Z

src/LiveDevelopment/Agents/RemoteFunctions.js

        _makeHighlightDiv: function (element, doAnimation) {
            var elementBounds = element.getBoundingClientRect(),
                highlight = window.document.createElement("div"),
                styles = window.getComputedStyle(element);
+		var transitionDuration = parseFloat(styles.getPropertyValue('transition-duration'));


Nit: these two variables could also be combined with the above by separating the values with , like the others are.

Worie · 2016-12-22T14:08:36Z

Due to getClientBoundingRect including the transform when calculating the size of element and its position (https://i.imgur.com/tNNjXEw.png), i get pretty weird and unintuitive result - http://imgur.com/MTwZcfB .

This is a pretty simple animation which rotates the element by 90degrees, as you can see the size of element is enlarged in preview due to usage window.getClientBoundingRect

I do not know how to bite this one without some heavy math calculations (nor I am any good at math).

Perhaps some of you have an idea how to get the current implementation to act like a chrome one easly?

petetnt · 2016-12-23T08:09:40Z

@Worie I was thinking about that but didn't find any simple solutions yet, could you share an sample project / file that shows the behaviour in the GIF?

Worie · 2016-12-23T18:57:41Z

Perhaps this will be enough: https://gist.github.com/Worie/caae957b805f08cb733f51406d32aabe

Also, now every transform function is applied to the highlight div - probably only scale and rotate should be considered.

Worie · 2017-01-28T19:18:09Z

I've started a little refactor of this code. I'll not focus on the transform issue atm, though.

Worie · 2017-01-28T21:16:18Z

@petetnt In latest commit, I've removed the sum function we introduced during this PR. I felt that it was making more harm than good and made it less clear what exacly is happening there.

Of course, I can revert this change and apply the sum function to current implementation. But I guess it's not really necessary.

petetnt · 2017-02-01T13:24:57Z

Hey Worie,

sorry for the lack of comms, been a bit busy as of late. Is this PR ready for another round of review?

Worie · 2017-02-01T13:40:57Z

Yeah I guess. If we could only somehow invoke the inspect on element as we can in Chrome Dev tools from RemoteFunctions this PR would be much shorter :/ But I don't think it is possible atm.

Anyway - the workaround for transform issue is that we simply do not apply transform to our custom highlightning divs. That means that they dont rotate nor scale, but translation works pretty good on them.

I guess that we could perhaps split this into two issues - close this one when the code quality is good enough, and then take care of the transform issue.

Because, I think that it might take a while to do (and I have no idea atm how, but I guess we'd need to get the data about the transformations from matrix3d and reverse it to something like rotate(45deg) translateX()...)

…zed via user preferences)

Remove trailing spaces, use Object.assign instead of manually iterating over remoteHighlight properties and remove quotes from object properties in default configuration of remoteHighlight

Enable injecting new config into remoteFunction when user changed preferences, without the need to restart the live preview session.

…e size of highlight elements instead of manaul calculations on each element. The code is shorter and more readable. Also, it’ll be easier to move drawing functions into separate file if necessary.

petetnt · 2017-02-15T14:53:22Z

I think the scope is just fine right now, I could run another code review and test it out again myself and then merge it in (and create a issue for tracking the transform part). @ficristo you could also take a look if you want to 👍

ficristo · 2017-02-15T14:57:56Z

I think @saurabh95 is more indicated

T3chTobi · 2017-03-05T01:51:12Z

When will the Live Preview Highlight with Margin and Padding be available? Or can I activate it manually now?
Thanks for your help!

T3chTobi · 2017-03-05T12:14:50Z

This feature is so great and important, can I use it right now through some code implementation? http://imgur.com/Gx1r4P3

Worie · 2017-03-21T19:15:45Z

You can always clone my fork and set it as a source for Brackets, see how to set up dev environment.

Can I somehow help you guys with this PR? I mean, we could discuss the code that's already here, or perhaps I can tell you my way of thinking when i was writing this. Be sure to ping me when anything like this will be necessary.

petetnt

Sorry about taking so long @Worie, this got a bit buried between other work.

The implementation looks a bit complex, but then again what it achieves is also a bit complex so that is okay.

I put some small review comments about the code style, and one that is most likely an error, but otherwise it looks pretty good to me.

You can run the files through eslint to catch some other errors there might be if any. 👍

petetnt · 2017-03-21T20:05:30Z

src/LiveDevelopment/Agents/RemoteFunctions.js

    var lastKeepAliveTime = Date.now();
+	var req, timeout;
+	var animateHighlight = function (time) {


L44-L55 have some indentation issues, convert tabs -> spaces and they should be all right

petetnt · 2017-03-21T20:05:50Z

src/LiveDevelopment/Agents/RemoteFunctions.js


            // Don't highlight elements with 0 width & height
            if (elementBounds.width === 0 && elementBounds.height === 0) {
                return;
            }
+
+            var realElBorder = {
+              "right": elementStyling.getPropertyValue('border-right-width'),


No need to quote the keys in L293-L296

petetnt · 2017-03-21T20:09:00Z

src/LiveDevelopment/Agents/RemoteFunctions.js

+            var innerWidth = elementBounds.width - parseInt(realElBorder.left) - parseInt(realElBorder.right);
+            var innerHeight = elementBounds.height - parseInt(realElBorder.top) - parseInt(realElBorder.bottom);
+
+            var visualisations = [];


This should be an object literal instead of assigning horizontal and vertical as array properties?

var visualisations = { horizontal: "left, right", vertical: "top, bottom", }

petetnt · 2017-03-21T20:10:24Z

src/LiveDevelopment/Agents/RemoteFunctions.js

+            var drawPaddingRect = function(side) {
+              var elStyling = {};
+
+              if(visualisations['horizontal'].indexOf(side) >= 0) {


Maybe prefer the dot-notation (visualisations.horizontal etc.) in L309-351.

Nit: space between if and ( -> if (visualisations)...

petetnt · 2017-03-21T20:11:53Z

src/LiveDevelopment/Agents/RemoteFunctions.js

+          var drawMarginRect = function(side) {
+            var elStyling = {};
+
+            var  margin = [];


Nit: extra space between var and margin

petetnt · 2017-03-21T20:13:31Z

src/LiveDevelopment/Agents/RemoteFunctions.js

+            };
+
+            var mainBoxStyles = config.remoteHighlight.stylesToSet;
+                mainBoxStyles['border'] = 'none';


Nit: mainBoxStyles should be aligned to var

petetnt · 2017-03-21T20:15:05Z

src/LiveDevelopment/Agents/RemoteFunctions.js

+                        arr[i]
+                    );
+
+                    _setStyleValues(


Nit: This should be a one-liner as there's only couple of short properties

Oh, okay. It's common practice for me to place parameters (even short ones) in separate lines so git displays the changes in more friendly way. But sure, I'll make it a one-liner. 👍

saurabh95 · 2017-04-02T05:13:49Z

src/LiveDevelopment/Agents/RemoteFunctions.js

@@ -30,10 +30,29 @@
 * modules should define a single function that returns an object of all
 * exported functions.
 */
-function RemoteFunctions(experimental, remoteWSPort) {
+function RemoteFunctions(config, remoteWSPort) {


I think we can pass remoteWSPort as part of config only, something like config.remoteWSPort.
Then instead of checking for remoteWSPort in https://github.com/adobe/brackets/pull/12949/files#diff-a40df952af8fd1808c321dab548ae11aR1032, we can check for !experimental flag as we create websocket only when we are not using experimental live preview.
But I think you can leave this for later as you might have to make changes which are not relevant for this feature, once this is merged I can make the above changes.

Hi, you're right. Unfortunetely I won't be accessible for a while, so I guess we could close this one and open new PRs as necessary, if that's OK.

Worie · 2017-04-06T10:35:56Z

@petetnt what do you think?

petetnt · 2017-04-06T10:39:01Z

LGTM! Can you @Worie open an issue tracking the comment @saurabh95 left to be fixed later.

petetnt · 2017-04-06T10:39:37Z

Also thanks for this great contribution and sorry that it took so long to get merged 👍

Worie · 2017-04-06T10:42:29Z

Awesome! Sure, I'll create issues that were not covered in this PR. Thanks!

* add a tab with default extensions to extension manager * implement getDefaultExtensionPath function * enable and disable default extensions through a preference * use the preference when attempting to load an extension * do not allow disabling/enabling of themes * better way to handle themes * Upgraded version to 1.10 * Now search history is stored in preferences and user can go through the search history using key up and key down in search bar * ALF Automation (#13179) * Updated by ALF automation. * Updated by ALF automation. * Updated by ALF automation. * Fixed a minor issue * Addresses issue where style and script tags (and their contents) did not appear as collapsible in html mixed mode. * Add no-unsafe-negation rule and upgrade grunt-eslint to 19.0.0 * Added a check of Untitled doc in _getNormalizedFilename and _getDenormalizedFilename * ALF Automation (#13204) * Updated by ALF automation. * Updated by ALF automation. * Updated by ALF automation. * Updated by ALF automation. * Updated by ALF automation. * Replaced .border-radius with border-radius css in brackets_patterns_override.less This fixes #13227 * Addressed review comments and also added tests * Add jsx language ID to supported languages for JavaScript code hints * Style code (cleanup) * Add media queries to display search and filter below tabs * Change padding to be consistent with other elements' padding * Reset margin of filter dropdown and add top and bottom padding to div container * Prevent media queries from overlapping * Wrap search elements in a container & add responsiveness using flex * Use flex-item mixin * Move custom search bar width to media query * Add GitHub Brackets OAuth token to romove CLA pull request limit * Adding rest filter expression * Updated webplatform links in css.json from https://docs.webplatform.org/wiki/ to http://www.webplatform.org/docs/ (#13266) * Addresses #13264 where setting `saveFoldStates` preference to false caused the code folding extension to stop working. * CSS code hints in 'style' attribute value context * Append auth token only when available in travis environment (#13272) * Append auth token only when available in travis environment * Remove unused var * #7276 Live Preview highlight customization (#12949) * Live Preview visual customization (colors of highlight can be customized via user preferences) * PR improvements Remove trailing spaces, use Object.assign instead of manually iterating over remoteHighlight properties and remove quotes from object properties in default configuration of remoteHighlight * Allow to animate transform property via transition * Remove old vendor prefixes from transitionValues in RemoteFunctions.js * updateConfig RemoteFunctions.js method Enable injecting new config into remoteFunction when user changed preferences, without the need to restart the live preview session. * Show margin and paddings in live preview. * Do not show element if it has width or height equal to 0. A little bit of clean up * PR improvements calculateSize is renamed to sum. (better naming conventions are welcome). sum now takes an array as argument. It returns sum of parsed array elements, suffixed with „px”. * Redraw via requestAnimationFrame if element has transition / animation on it. * PR improvements. Set experimental to false by default, if no config specified (caused the test to crash). Minor code quality improvements, removed duplicated variables. * Fix ESLINT errors. * drawMarginRect and drawPaddingRect functions now calculate the require size of highlight elements instead of manaul calculations on each element. The code is shorter and more readable. Also, it’ll be easier to move drawing functions into separate file if necessary. * Temporary workaround for transform issue. * Formatting improvements * Fix font family name preference (#13279) * Update grunt-contrib-watch to 1.0.0 and clean a bit the task (#13215) * Scrapped QuickDocs data for css and html from MDN to css.json and html.json (#13268) * Scrapped summary and values of css properties from MDN to css.json * Migrated mozilla's extension of MDNDocs to Brackets with some minor changes * Removed redundant file * Fixed faling tests, modified a test to test HTML docs * Renamed all WebPlatformDocs strings to MDNDocs * Addressed review comments * Removed the usage of array for supported languages * Pre-release build for 1.10 (#13283) * Fix #13274 - make Brackets margin/padding highlight work like Chrome devtools one * Migrated missing Quick Docs Tests from PR #10036 (#13285) * Add inputStyle preference (#13216) * Add indentBlockComment preference. Support indent block comments on line comment command * Whitespace removal * AtRules, Pseudo elements and Pseudo selector code hints * Revert "Fix #13274 - make Brackets margin/padding remoteHighlight work like Chrome one" * Fix highlighting elements with border and transform-origin property. * Adress review comments and restructure using different extensions * Added Search History UI similar to Quick Open * Minor Change * Fixed some issues * Check for useTabChar and correct a comment. Add some tests * Handle multiline attribute value and add UNIT test for element styles * Search bar is visible after pressing arrow up and down keys * Added JSDocs and updated tests * Zero results are not highlighted red now * Added dropdown icon to toggle search History * fix the extension-manager-min-width variable * Handle SCSS mode seperately * Use a single preference * Add test for block comments * Correct a test * Check also if it is a line comment command * Addresses #13282 which caused performance issues when navigating between large folded files. A check is now performed to ensure we do not attempt to restore line folds for editors whose folds have already been initialised. * removed unused variable * Removed filtering in search dropdown * Return 0 from _firstNotWs * Changed url to access Japanese translated page (#13321) * Update Codemirror to version 5.25.2 * Addressed review comments * Removed Lint error * add: flow-root as value for display (#13334) * Changed Global.js to enable Native Menus for Linux * Adding unit tests for the newly added extensions * Fix for eslint errors * Extract pseudo context validation as a function * Enabled tests for Native Menus in Linux * Editor command handlers test (#13337) * EditorCommandHandlers-test: use testToggleLine everywhere * EditorCommandHandlers-test: use testToggleBlock everywhere * Now initial query is also added to searchHistory queue * Update CSS Code Hints Properties Add properties – `all` – `caret-color` – `hanging-punctuation` – `scroll-behavior` – `tab-size` – `user-select`. Add values: – `clone` and `slice` for `box-decoration-break` – `contents` for `display` Remove deprecated `padding-box` from `box-sizing`. * Update CSS Code Hints pseudo-selectors Add pseudo-classes – `:default` – `:dir()` – `:focus-within` – `:indeterminate` – `:matches()` – `:placeholder-shown`. Add pseudo-element `::placeholder`. Fix alphabetical order, space around `:`. * Update more Add – `grid-template` – `isolation` – `mix-blend-mode` Add `subgrid` for `display` Reorder `background-blend-mode` * Added test * Fix :matches(), add :fullscreen * Added check for length of dependencies also in npm-installer.js * Translated English to Japanese Comments (#13327) * Change parseInt to parseFloat everywhere where calculating box-model visualization to prevent glitches (#13353) * Fixed Project Manager failing tests * Brackets 1.10 Pre-release 2 * Fix box model regression (transform) (#13357) * Various additions and changes to Swedish interface strings (#13404) * Mixed changes and additions to Swedish interface strings * One addition and one fix * More additions and changes * Correct one word in sv/strings.js * Externalize Live preview hightlight settings string * ALF Automation (#13293) * Updated by ALF automation. * Updated by ALF automation. * Updated by ALF automation. * Updated by ALF automation. * Updated by ALF automation. * Updated by ALF automation. * Fix root strings (#13435) * ALF Automation (#13434) * Updated by ALF automation. * Updated by ALF automation. * Updated by ALF automation. * Updated by ALF automation. * Updated by ALF automation. * Updated by ALF automation. * Updated by ALF automation. * Updated by ALF automation. * Updated by ALF automation. * Change in UUID fetching for first launches (#13419) * Fixing Mac compilation errors * Removing console message * Fixing linter errors in this file. * Add option for first highlight index in Quick Open and Search History (#13444) * Fixed #13437 * minor change * Passed first highlight index as paramater to QuickSearchField * Added jsdocs * Changed WebPlatform License to MDN License and respective strings * Use the correct border color in multifile Replace in Files bar with dark theme * Updated by ALF automation. (#13454) * In writeJSON (grunt), use CRLF on Windows (#13458) * Fixes translation error in Simplified Chinese Fixes /issues/13416 * Enable no-redeclare to eslint (#13452) * Added strings for translation for 1.10 Release * minor change * Add navigation strings. * Updated some strings * ALF Automation (#13471) * Updated by ALF automation. * Updated by ALF automation. * Added some more translations * Saurabh95/encoding support (#13412) * Now encoding is passed as parameter on file read and it is used by writefile in order to preserve encoding * UI wiring * Code Cleanup * Fixed failing tests * Added warning Dialog while changing encoding * Added some Linux specific changes * Fixed some linting errors * Reverted last commit * Minor changes * Now selected encoding is stored in state * Fixed lint error * Added some more encodings * Added some more encodings * Fixed lint errors * Removed duplicate encodings * Fixed failing tests * Used externalized strings * Addressed review comments * Added supported encodings file * Addressed review comments * Addressed review comments * More Robust UUID Handling (#13476) * More efficient UUID Handling: We need to backing up existing uuid so that we can accurately get the new user count, as the uuid is changed now and will effect the existing users as well. Also added robust checking for shell API availability before calling the shell API and if not present handling olderUUID in a different way. * Addressed review comments. * Now BOM is preserved for UTF-8 files (#13477) * Now BOM is preserved for UTF-8 files * Added error strings for failure in encode/decode and utf-16 * Removed utf-16 from encodings list * Addressed review comments * fix JP translation in comment tags (#13363) * New File and New Folder execute in project root if there's no selection (#12752) * New File and New Folder execute in project root if there's no selection * Add ProjectManager.getSelectedFileTreeItem * Add function to get file tree context instead * Polish translation update for brackets 1.10 (#13398) * Polish translation update for brackets 1.10 * Corrected some strings in pl translation * Added basic translation for core preferences section * Transform some polish strings in core preferences section * German translation (#13436) * zh-cn (#13473) * Update urls.js * Create Getting Started * Delete Getting Started * Create index.html * Create main.css * Add files via upload quick-edit.png * Problems panel: add an icon per problem to tell which type it is (#13430) * Sequential navigation in edit history (#13418) * First commit - sequential navigation in edit history * Fix lint errors * Handle undefined history entries * Added comments and some additional edge case handling * Update code review comments * Put a max navigation frame capture limit and control overflow once reached. Fix all bugs found in unit testing. * Fix indentation issues * Change spaces to tabs for indentation * Fix mixed tabs and spaces * Convert spaces to tab * resolve mixed tabs and spaces * Initialize variables * Handle external file changes and discard stale frames * Additional checks to validate the navigation frames * Address review comments * pre release build 3 * Fixed JS lint error (#13489) * Fix NavigationProvider throwing errors when doc.file is missing. Fixes #13491 (#13492) Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * ALF Automation (#13474) * Updated by ALF automation. * Updated by ALF automation. * Updated by ALF automation. * Updated by ALF automation. * Updated by ALF automation. * Adding extra check to handle null mrof list entries (#13495) * After changing encoding of a dirty file if user cancels the popup then encoding of file should not be changed (#13497) * After changing encoding of a dirty file if user cancels the popup then encoding of file should not be changed * Removed popup for dirty file encoding change * Now doc is reloaded if the path of the file being saved is same

petetnt suggested changes Nov 27, 2016

View reviewed changes

Worie closed this Nov 28, 2016

Worie reopened this Nov 28, 2016

petetnt reviewed Nov 28, 2016

View reviewed changes

ficristo reviewed Nov 29, 2016

View reviewed changes

Worie changed the title ~~Live Preview highlight customization~~ #7276 Live Preview highlight customization Nov 30, 2016

petetnt self-assigned this Dec 1, 2016

petetnt suggested changes Dec 6, 2016

View reviewed changes

petetnt suggested changes Dec 19, 2016

View reviewed changes

Worie force-pushed the worie/live-preview-appearance-configuration branch from 289cc5b to 2796fef Compare December 19, 2016 21:13

Worie mentioned this pull request Dec 22, 2016

Enhanced live preview element highlight #12934

Open

ficristo mentioned this pull request Jan 17, 2017

Added Reverse Inspect in Live Preview using WebSockets, and now forwa… #13044

Merged

2 tasks

Worie added 5 commits February 15, 2017 15:19

Live Preview visual customization (colors of highlight can be customi…

b1ef3be

…zed via user preferences)

PR improvements

cb9fb57

Remove trailing spaces, use Object.assign instead of manually iterating over remoteHighlight properties and remove quotes from object properties in default configuration of remoteHighlight

Allow to animate transform property via transition

6dfd2de

Remove old vendor prefixes from transitionValues in RemoteFunctions.js

5250924

updateConfig RemoteFunctions.js method

0e014c5

Enable injecting new config into remoteFunction when user changed preferences, without the need to restart the live preview session.

Worie added 2 commits February 15, 2017 15:20

drawMarginRect and drawPaddingRect functions now calculate the requir…

36c356e

…e size of highlight elements instead of manaul calculations on each element. The code is shorter and more readable. Also, it’ll be easier to move drawing functions into separate file if necessary.

Temporary workaround for transform issue.

24b2e6b

Worie force-pushed the worie/live-preview-appearance-configuration branch from cbbbe08 to 24b2e6b Compare February 15, 2017 14:37

ficristo requested a review from saurabh95 February 15, 2017 14:58

petetnt suggested changes Mar 21, 2017

View reviewed changes

Formatting improvements

12b882d

Worie force-pushed the worie/live-preview-appearance-configuration branch from 221203e to 12b882d Compare March 24, 2017 10:54

saurabh95 approved these changes Apr 2, 2017

View reviewed changes

petetnt approved these changes Apr 6, 2017

View reviewed changes

petetnt merged commit 0442881 into adobe:master Apr 6, 2017

Worie deleted the worie/live-preview-appearance-configuration branch April 6, 2017 10:42

ficristo added this to the Release 1.10 milestone Jun 18, 2017

		// inject RemoteFunctions
		var command = "window._LD=" + RemoteFunctions + "(" + LiveDevelopment.config.experimental + ");";


		// inject RemoteFunction
		var command = "window._LD=" + RemoteFunctions + "(" + JSON.stringify(LiveDevelopment.config) + ");";


		var mainBoxStyles = config.remoteHighlight.stylesToSet;

		var paddingVisualisations = [


		var animationDuration = parseFloat(styles.getPropertyValue('animation-duration'));

		if (transitionDuration)

#7276 Live Preview highlight customization #12949

#7276 Live Preview highlight customization #12949

Conversation

Worie commented Nov 27, 2016 • edited Loading

petetnt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Worie commented Nov 28, 2016 • edited Loading

petetnt commented Nov 28, 2016

Choose a reason for hiding this comment

Worie commented Nov 29, 2016 • edited Loading

ficristo Nov 29, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Worie Nov 30, 2016 • edited Loading

Choose a reason for hiding this comment

Worie commented Nov 30, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Worie commented Dec 16, 2016

ficristo commented Dec 16, 2016

petetnt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Worie commented Dec 22, 2016 • edited Loading

petetnt commented Dec 23, 2016

Worie commented Dec 23, 2016 • edited Loading

Worie commented Jan 28, 2017

Worie commented Jan 28, 2017 • edited Loading

petetnt commented Feb 1, 2017

Worie commented Feb 1, 2017

petetnt commented Feb 15, 2017

ficristo commented Feb 15, 2017

T3chTobi commented Mar 5, 2017

T3chTobi commented Mar 5, 2017

Worie commented Mar 21, 2017

petetnt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Worie commented Apr 6, 2017

petetnt commented Apr 6, 2017

petetnt commented Apr 6, 2017

Worie commented Apr 6, 2017

Worie commented Nov 27, 2016 •

edited

Loading

Worie commented Nov 28, 2016 •

edited

Loading

Worie commented Nov 29, 2016 •

edited

Loading

ficristo Nov 29, 2016 •

edited

Loading

Worie Nov 30, 2016 •

edited

Loading

Worie commented Nov 30, 2016 •

edited

Loading

Worie commented Dec 22, 2016 •

edited

Loading

Worie commented Dec 23, 2016 •

edited

Loading

Worie commented Jan 28, 2017 •

edited

Loading