From 05b75c0207130faeb14ccbe2c7a72bd7aaa9724d Mon Sep 17 00:00:00 2001 From: David Storey Date: Tue, 5 Jan 2016 21:22:09 -0800 Subject: [PATCH] Add image restriction --- .../css/common/buildscripts/css-schema.xml | 65 +----- .../languages/css/common/services/browsers.js | 196 +----------------- .../css/common/services/intelliSense.ts | 15 ++ .../css/common/services/languageFacts.ts | 25 +++ 4 files changed, 57 insertions(+), 244 deletions(-) diff --git a/src/vs/languages/css/common/buildscripts/css-schema.xml b/src/vs/languages/css/common/buildscripts/css-schema.xml index 33ed29dfd8c..6feb05a51cd 100644 --- a/src/vs/languages/css/common/buildscripts/css-schema.xml +++ b/src/vs/languages/css/common/buildscripts/css-schema.xml @@ -867,7 +867,7 @@ - + Shorthand property for setting most background properties at the same place in the style sheet. @@ -882,23 +882,12 @@ Equivalent to '0%' for the horizontal position if one or two values are given, otherwise specifies the left edge as the origin for the next offset. - The background is fixed with regard to the element's contents: if the element has a scrolling mechanism, the background scrolls with the element's contents. - - - - - A value of 'none' counts as an image layer but draws nothing. - - - - - Equivalent to '100%' for the horizontal position if one or two values are given, otherwise specifies the right edge as the origin for the next offset. @@ -908,13 +897,6 @@ Equivalent to '0%' for the vertical position if one or two values are given, otherwise specifies the top edge as the origin for the next offset. - - - - - - - @@ -990,30 +972,13 @@ Sets the background color of an element. - + Sets the background image(s) of an element. - - - - - - Counts as an image layer but draws nothing. - - - - - - - - - - - - + @@ -3467,16 +3432,10 @@ - + Sets the image that will be used as the list item marker. When the image is available, it will replace the marker set with the 'list-style-type' marker. - - - - - - @@ -6875,28 +6834,21 @@ Defines the alpha channel threshold used to extract the shape using an image. A value of 0.5 means that the shape will enclose all the pixels that are more than 50% opaque. - + Adds one or more exclusion areas to the element’s wrapping context. The shape is computed based on the content box of the element. - The shape is computed based on the shape of the display as described in css-round-display. - - - The background is painted within (clipped to) the margin box. The shape is computed based on the shape defined by the shape-outside and shape-margin properties. - - - If an SVG element it defines the shape. If an image, the shape is extracted and computed based on the alpha channel. @@ -6905,20 +6857,15 @@ Adds a margin to a 'shape-outside'. This defines a new shape that is the smallest contour that includes all the points that are the 'shape-margin' distance outward in the perpendicular direction from a point on the underlying shape. - + Specifies an orthogonal rotation to be applied to an image before it is laid out. - - The background is painted within (clipped to) the margin box. The float area is unaffected. - - - diff --git a/src/vs/languages/css/common/services/browsers.js b/src/vs/languages/css/common/services/browsers.js index e017ceb0cd8..a2075086398 100644 --- a/src/vs/languages/css/common/services/browsers.js +++ b/src/vs/languages/css/common/services/browsers.js @@ -1,8 +1,10 @@ -/*--------------------------------------------------------- - * Copyright (C) Microsoft Corporation. All rights reserved. - *---------------------------------------------------------*/ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + // file generated from css-schema.xml using css-exclude_generate_browserjs.js -define(["require", "exports"], function(require, exports) { +define(["require", "exports"], function(require, exports) { exports.data ={ "css": { @@ -1084,7 +1086,7 @@ exports.data ={ { "name": "background", "desc": "Shorthand property for setting most background properties at the same place in the style sheet.", - "restriction": "enum, color, length, repeat, percentage, box, url", + "restriction": "enum, image, color, length, repeat, percentage, box", "values": [ { "name": "bottom", @@ -1102,54 +1104,10 @@ exports.data ={ "name": "left", "desc": "Equivalent to '0%' for the horizontal position if one or two values are given, otherwise specifies the left edge as the origin for the next offset." }, - { - "name": "linear-gradient()", - "browsers": "FF16,IE10,O12.5" - }, { "name": "local", "desc": "The background is fixed with regard to the element's contents: if the element has a scrolling mechanism, the background scrolls with the element's contents." }, - { - "name": "-moz-element(#id)", - "browsers": "FF3.6" - }, - { - "name": "-moz-linear-gradient()", - "browsers": "FF3.6" - }, - { - "name": "-moz-radial-gradient()", - "browsers": "FF3.6" - }, - { - "name": "-moz-repeating-linear-gradient()", - "browsers": "FF10" - }, - { - "name": "-moz-repeating-radial-gradient()", - "browsers": "FF10" - }, - { - "name": "-o-linear-gradient()", - "browsers": "O11.1-12" - }, - { - "name": "-o-repeating-linear-gradient()", - "browsers": "O11.1-12" - }, - { - "name": "radial-gradient()", - "browsers": "FF16,IE10,O12.5" - }, - { - "name": "repeating-linear-gradient()", - "browsers": "FF16,IE10,O12.5" - }, - { - "name": "repeating-radial-gradient()", - "browsers": "FF16,IE10,O12.5" - }, { "name": "right", "desc": "Equivalent to '100%' for the horizontal position if one or two values are given, otherwise specifies the right edge as the origin for the next offset." @@ -1161,33 +1119,6 @@ exports.data ={ { "name": "top", "desc": "Equivalent to '0%' for the vertical position if one or two values are given, otherwise specifies the top edge as the origin for the next offset." - }, - { - "name": "url()" - }, - { - "name": "-webkit-gradient()", - "browsers": "C,S4" - }, - { - "name": "-webkit-image-set()", - "browsers": "C,S6" - }, - { - "name": "-webkit-linear-gradient()", - "browsers": "C,S5.1" - }, - { - "name": "-webkit-radial-gradient()", - "browsers": "C,S5.1" - }, - { - "name": "-webkit-repeating-linear-gradient()", - "browsers": "C,S5.1" - }, - { - "name": "-webkit-repeating-radial-gradient()", - "browsers": "C,S5.1" } ] }, @@ -1286,82 +1217,11 @@ exports.data ={ { "name": "background-image", "desc": "Sets the background image(s) of an element.", - "restriction": "url, enum", + "restriction": "image, enum", "values": [ - { - "name": "linear-gradient()", - "browsers": "E,C26,FF16,IE10,O12.1,S6.1" - }, - { - "name": "-moz-image-rect()", - "browsers": "FF3.6" - }, - { - "name": "-moz-linear-gradient()", - "browsers": "FF3.6" - }, - { - "name": "-moz-radial-gradient()", - "browsers": "FF3.6" - }, - { - "name": "-moz-repeating-linear-gradient()", - "browsers": "FF10" - }, - { - "name": "-moz-repeating-radial-gradient()", - "browsers": "FF10" - }, { "name": "none", "desc": "Counts as an image layer but draws nothing." - }, - { - "name": "-o-linear-gradient()", - "browsers": "O11.1" - }, - { - "name": "-o-repeating-linear-gradient()", - "browsers": "O11.1-12" - }, - { - "name": "radial-gradient()", - "browsers": "E,FF16,IE10,O12.5" - }, - { - "name": "repeating-linear-gradient()", - "browsers": "E,C26,FF16,IE10,O12.1,S6.1" - }, - { - "name": "repeating-radial-gradient()", - "browsers": "E,C26,FF16,IE10,O12.1,S6.1" - }, - { - "name": "url()" - }, - { - "name": "-webkit-gradient()", - "browsers": "C,S4" - }, - { - "name": "-webkit-image-set()", - "browsers": "C,S6" - }, - { - "name": "-webkit-linear-gradient()", - "browsers": "C,S5.1" - }, - { - "name": "-webkit-radial-gradient()", - "browsers": "C,S5.1" - }, - { - "name": "-webkit-repeating-linear-gradient()", - "browsers": "C,S5.1" - }, - { - "name": "-webkit-repeating-radial-gradient()", - "browsers": "C,S5.1" } ] }, @@ -3673,27 +3533,8 @@ exports.data ={ { "name": "list-style-image", "desc": "Sets the image that will be used as the list item marker. When the image is available, it will replace the marker set with the 'list-style-type' marker.", - "restriction": "url", - "values": [ - { - "name": "none" - }, - { - "name": "url()" - }, - { - "name": "linear-gradient()" - }, - { - "name": "radial-gradient()" - }, - { - "name": "repeating-linear-gradient()" - }, - { - "name": "repeating-radial-gradient()" - } - ] + "restriction": "image", + "values": [] }, { "name": "list-style-position", @@ -7940,29 +7781,14 @@ exports.data ={ "name": "shape-outside", "desc": "Specifies an orthogonal rotation to be applied to an image before it is laid out.", "browsers": "C37,O24", - "restriction": "box, shape, enum", + "restriction": "image, box, shape, enum", "values": [ - { - "name": "image()" - }, - { - "name": "linear-gradient()" - }, { "name": "margin-box" }, { "name": "none", "desc": "The float area is unaffected." - }, - { - "name": "radial-gradient()" - }, - { - "name": "repeating-linear-gradient()" - }, - { - "name": "repeating-radial-gradient()" } ] }, diff --git a/src/vs/languages/css/common/services/intelliSense.ts b/src/vs/languages/css/common/services/intelliSense.ts index f297d0205d1..670adc193ec 100644 --- a/src/vs/languages/css/common/services/intelliSense.ts +++ b/src/vs/languages/css/common/services/intelliSense.ts @@ -137,6 +137,7 @@ export class CSSIntellisense { this.getRepeatStyleProposals(entry, result); this.getLineProposals(entry, result); this.getBoxProposals(entry, result); + this.getImageProposals(entry, result); this.getBasicShapeProposals(entry, result); this.getValueEnumProposals(entry, result); this.getCSSWideKeywordProposals(entry, result); @@ -344,6 +345,20 @@ export class CSSIntellisense { return result; } + protected getImageProposals(entry:languageFacts.IEntry, result:Modes.ISuggestion[]):Modes.ISuggestion[] { + if (entry.restrictions.indexOf('image') !== -1) { + for (var image in languageFacts.imageFunctions) { + result.push({ + label: image, + documentationLabel: languageFacts.imageFunctions[image], + codeSnippet: image, + type: 'function' + }); + } + }; + return result; + } + protected getBasicShapeProposals(entry:languageFacts.IEntry, result:Modes.ISuggestion[]):Modes.ISuggestion[] { if (entry.restrictions.indexOf('shape') !== -1) { for (var shape in languageFacts.basicShapeFunctions) { diff --git a/src/vs/languages/css/common/services/languageFacts.ts b/src/vs/languages/css/common/services/languageFacts.ts index 646fafdc152..3242ee2ee0c 100644 --- a/src/vs/languages/css/common/services/languageFacts.ts +++ b/src/vs/languages/css/common/services/languageFacts.ts @@ -239,6 +239,31 @@ export var geometryBoxKeywords : { [name:string]:string } = { export var cssWideKeywords = ['initial', 'inherit', 'unset']; +export var imageFunctions : { [name:string]:string } = { + 'url()': 'Reference an image file by URL', + 'image()': 'Provide image fallbacks and annotations.', + '-webkit-image-set()': 'Provide multiple resolutions. Remember to use unprefixed image-set() in addition.', + 'image-set()': 'Provide multiple resolutions of an image and let the UA decide which is most appropriate in a given situation.', + '-moz-element()': 'Use an element in the document as an image. Remember to use unprefixed element() in addition.', + 'element()': 'Use an element in the document as an image.', + 'cross-fade()': 'Indicates the two images to be combined and how far along in the transition the combination is.', + '-webkit-gradient()': 'Deprecated. Use modern linear-gradient() or radial-gradient() instead.', + '-webkit-linear-gradient()': 'Linear gradient. Remember to use unprefixed version in addition.', + '-moz-linear-gradient()': 'Linear gradient. Remember to use unprefixed version in addition.', + '-o-linear-gradient()': 'Linear gradient. Remember to use unprefixed version in addition.', + 'linear-gradient()': 'A linear gradient is created by specifying a straight gradient line, and then several colors placed along that line.', + '-webkit-repeating-linear-gradient()': 'Repeating Linear gradient. Remember to use unprefixed version in addition.', + '-moz-repeating-linear-gradient()': 'Repeating Linear gradient. Remember to use unprefixed version in addition.', + '-o-repeating-linear-gradient()': 'RepeatingLinear gradient. Remember to use unprefixed version in addition.', + 'repeating-linear-gradient()': 'Same as linear-gradient, except the color-stops are repeated infinitely in both directions, with their positions shifted by multiples of the difference between the last specified color-stop’s position and the first specified color-stop’s position.', + '-webkit-radial-gradient()': 'Radial gradient. Remember to use unprefixed version in addition.', + '-moz-radial-gradient()': 'Radial gradient. Remember to use unprefixed version in addition.', + 'radial-gradient()': 'Colors emerge from a single point and smoothly spread outward in a circular or elliptical shape.', + '-webkit-repeating-radial-gradient()': 'Repeating radial gradient. Remember to use unprefixed version in addition.', + '-moz-repeating-radial-gradient()': 'Repeating radial gradient. Remember to use unprefixed version in addition.', + 'repeating-radial-gradient()': 'Same as radial-gradient, except the color-stops are repeated infinitely in both directions, with their positions shifted by multiples of the difference between the last specified color-stop’s position and the first specified color-stop’s position.' +}; + export var basicShapeFunctions : { [name:string]:string } = { 'circle()': 'Defines a circle.', 'ellipse()': 'Defines an ellipse.',