Autocomplete CSS properties. http://webkit.org/b/17374

CSS.js

@@ -0,0 +1,35 @@
+WebInspector.CSS = {
+    properties: (function getCSSProperties(){
+        var properties = Array.convert(document.defaultView.getComputedStyle(document.documentElement, ''));
+        // Add shorthands
+        for (var i=0; i<properties.length; i++) {
+            var s = properties[i].split('-');
+            var j = s.length;
+            while (--j) {
+                var prop = s.slice(0, j).join('-');
+                if (typeof document.documentElement.style[prop] !== 'undefined' && properties.indexOf(prop) < 0) {
+                    properties.push(prop);
+                }
+            }
+        }
+        return properties;
+    })()
+}
+
+WebInspector.CSS.properties.startsWith = function startsWith(str)
+{
+    return this.filter(function(prop){
+        return prop.indexOf(str) === 0
+    });
+};
+
+WebInspector.CSS.properties.firstStartsWith = function firstStartsWith(str)
+{
+    if (!str) return '';
+    for (var i=0; i<this.length; i++) {
+        if (this[i].indexOf(str) === 0) {
+            return this[i];
+        }
+    }
+    return '';
+};

StylesSidebarPane.js

@@ -1298,8 +1298,6 @@ WebInspector.StylePropertyTreeElement.prototype = {
     {
         var arrowKeyPressed = (event.keyIdentifier === "Up" || event.keyIdentifier === "Down");
         var pageKeyPressed = (event.keyIdentifier === "PageUp" || event.keyIdentifier === "PageDown");
-        if (!arrowKeyPressed && !pageKeyPressed)
-            return;
 
         var selection = window.getSelection();
         if (!selection.rangeCount)
@@ -1315,7 +1313,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
         var replacementString = wordString;
 
         var matches = /(.*?)(-?\d+(?:\.\d+)?)(.*)/.exec(wordString);
-        if (matches && matches.length) {
+        if (arrowKeyPressed || pageKeyPressed && matches && matches.length) {
             var prefix = matches[1];
             var number = parseFloat(matches[2]);
             var suffix = matches[3];
@@ -1352,6 +1350,22 @@ WebInspector.StylePropertyTreeElement.prototype = {
             }
 
             replacementString = prefix + number + suffix;
+        } else if (/[A-Z-]/.test(event.character)) {
+            setTimeout(function(){
+                var element = event.target;
+                var name = element.querySelector('.name');
+                var value = element.querySelector('.value');
+                var property = name.textContent;
+                var new_property = WebInspector.CSS.properties.firstStartsWith(property);
+                var n = property.length - new_property.length;
+                if (new_property != property) {
+                    name.textContent = new_property;
+                }
+                if (n < 0) {
+                    name.firstChild.select(n);
+                }
+            }, 0);
+            return;
         } else {
             // FIXME: this should cycle through known keywords for the current property name.
             return;

inspector.html

@@ -80,6 +80,7 @@
     <script type="text/javascript" src="PropertiesSidebarPane.js"></script>
     <script type="text/javascript" src="EventListenersSidebarPane.js"></script>
     <script type="text/javascript" src="Color.js"></script>
+    <script type="text/javascript" src="CSS.js"></script>
     <script type="text/javascript" src="StylesSidebarPane.js"></script>
     <script type="text/javascript" src="PanelEnablerView.js"></script>
     <script type="text/javascript" src="WelcomeView.js"></script>

inspector.js

@@ -679,8 +679,6 @@ WebInspector.documentClick = function(event)
 
 WebInspector.documentKeyDown = function(event)
 {
-    if (WebInspector.isEditingAnyField())
-        return;
 
     if (this.currentFocusElement && this.currentFocusElement.handleKeyEvent) {
         this.currentFocusElement.handleKeyEvent(event);

utilities.js

@@ -312,6 +312,27 @@ Element.prototype.offsetRelativeToWindow = function(targetWindow)
     return elementOffset;
 }
 
+KeyboardEvent.prototype.__defineGetter__('character', function getCharacter()
+{
+    var code = parseInt(this.keyIdentifier.slice(2), 16);
+    return String.fromCharCode(code);
+});
+
+Text.prototype.select = function select(start, end)
+{
+    end = end || this.textContent.length;
+    if (start < 0) {
+        start = end + start;
+    }
+    var selection = window.getSelection();
+    selection.removeAllRanges();
+    var range = document.createRange();
+    range.setStart(this, start);
+    range.setEnd(this, end);
+    selection.addRange(range);
+    return this;
+};
+
 Node.prototype.isWhitespace = isNodeWhitespace;
 Node.prototype.displayName = nodeDisplayName;
 Node.prototype.isAncestor = function(node)
@@ -632,6 +653,12 @@ HTMLTextAreaElement.prototype.moveCursorToEnd = function()
     this.setSelectionRange(length, length);
 }
 
+Array.convert = function convert(list)
+{
+    // convert array-like object to array
+    return Array.prototype.slice.call(list);
+};
+
 Array.prototype.remove = function(value, onlyFirst)
 {
     if (onlyFirst) {
@@ -656,6 +683,17 @@ Array.prototype.keySet = function()
     return keys;
 }
 
+Array.prototype.__defineGetter__('last', function getLast()
+{
+    return this[this.length - 1 || 0];
+});
+
+Array.prototype.__defineSetter__('last', function setLast(value)
+{
+    this[this.length - 1 || 0] = value;
+});
+
+
 function insertionIndexForObjectInListSortedByFunction(anObject, aList, aFunction)
 {
     // indexOf returns (-lowerBound - 1). Taking (-result - 1) works out to lowerBound.