inspector: colors

demo/Inspector/InspDemoForm1.lfm

@@ -1,6 +1,6 @@
 object DemoForm1: TDemoForm1
   FormLeft = 304
-  FormTop = 238
+  FormTop = 225
   FormWidth = 313
   FormHeight = 493
   Stylesheet.Strings = (
@@ -23,7 +23,7 @@ object DemoForm1: TDemoForm1
     object Div1: TDiv
       Style = 'position:absolute; box-sizing:border-box; left:14px; top:18px; width:162px; height:94px'
       object Label1: TLabel
-        Style = 'position:absolute; box-sizing:border-box; left:22px; top:18px'
+        Style = 'position:absolute;'#10'box-sizing:border-box;'#10'left:22px; top:18px;'#10'       padding: 6px;'
         Caption = 'Hello'
       end
     end

demo/lcl/Edit/editdemo.lpi

@@ -10,7 +10,6 @@
       </Flags>
       <SessionStorage Value="InProjectDir"/>
       <Title Value="editdemo"/>
-      <UseAppBundle Value="False"/>
       <ResourceType Value="res"/>
     </General>
     <CustomData Count="3">

src/base/fresnel.cssstyleinspector.pas

@@ -1,3 +1,13 @@
+{
+  ToDo:
+    - all
+    - shorthands
+    - mark overwritten
+    - color box
+    - edit value
+    - delete attribute
+    - add attribute
+}
 unit Fresnel.CSSStyleInspector;
 
 {$mode ObjFPC}{$H+}
@@ -51,6 +61,7 @@ type
     procedure ShowNothingSelected;
     procedure UpdateRule(Row: integer; Selectors, Origin: TCSSString; RuleEl: TCSSRuleElement);
     procedure UpdateDeclaration(RuleDiv: TDiv; Row: integer; DeclEl: TCSSDeclarationElement);
+    function UpdateDeclaration(DeclDiv: TDIv; DeclEl: TCSSDeclarationElement; var Index: integer): boolean;
     procedure UpdateLabel(DeclDiv: TDiv; Index: integer; aClass, aCaption: string);
     procedure Notification(AComponent: TComponent; Operation: TOperation); override;
   public
@@ -67,6 +78,7 @@ type
       DeclKeyLabelClass = 'CSSStyleInspKey';
       DeclColonLabelClass = 'CSSStyleInspColon';
       DeclValueLabelClass = 'CSSStyleInspValue';
+      DeclSemicolonLabelClass = 'CSSStyleInspSemicolon';
       SkippedClass = 'CSSStyleInspSkipped';
       BoxModellDivClass = 'CSSStyleInspBoxModell';
       //
@@ -470,6 +482,7 @@ var
   i, Index: Integer;
   DeclDiv: TDiv;
   KeyData: TCSSAttributeKeyData;
+  TargetResolver: TCSSResolver;
 begin
   // add or update div
   if Row<RuleDiv.NodeCount-1 then // -1 for the footer
@@ -481,14 +494,72 @@ begin
     RuleDiv.InsertBefore(DeclDiv,RuleDiv.Nodes[Row]);
   end;
 
-  KeyTxt:='';
-  for i:=0 to DeclEl.KeyCount-1 do
+  Index:=0;
+  if not UpdateDeclaration(DeclDiv,DeclEl,Index) then
   begin
-    if i>0 then
-      KeyTxt+=', ';
-    KeyTxt+=DeclEl.Keys[i].AsFormattedString;
+    // invalid declaration: simply show "keys: value"
+    KeyTxt:='';
+    for i:=0 to DeclEl.KeyCount-1 do
+    begin
+      if i>0 then
+        KeyTxt+=', ';
+      KeyTxt+=DeclEl.Keys[i].AsFormattedString;
+    end;
+
+    ValueTxt:='';
+    for i:=0 to DeclEl.ChildCount-1 do
+    begin
+      if i>0 then
+        ValueTxt+=', ';
+      ValueTxt+=DeclEl.Children[i].AsFormattedString;
+    end;
+    ValueCaption:=ValueTxt;
+    if DeclEl.IsImportant then
+      ValueCaption+=' !important';
+    ValueCaption+=';';
+
+    UpdateLabel(DeclDiv,Index,SkippedClass,KeyTxt+': '+ValueCaption);
+    inc(Index);
   end;
 
+  // delete old elements
+  while DeclDiv.NodeCount>Index do
+    DeclDiv.Nodes[DeclDiv.NodeCount-1].Free;
+end;
+
+function TCSSStyleInspector.UpdateDeclaration(DeclDiv: TDIv;
+  DeclEl: TCSSDeclarationElement; var Index: integer): boolean;
+var
+  KeyEl: TCSSElement;
+  ResolvedKeyEl: TCSSResolvedIdentifierElement;
+  KeyData: TCSSAttributeKeyData;
+  TargetResolver: TCSSResolver;
+  Desc: TCSSAttributeDesc;
+  ValueTxt, ValueCaption: String;
+  i: Integer;
+  KeyTxt: TCSSString;
+begin
+  Result:=false;
+  if (DeclEl.KeyCount<>1) then
+    exit; // only 1 key attributes
+  KeyEl:=DeclEl.Keys[0];
+  if not (KeyEl is TCSSResolvedIdentifierElement) then
+    exit; // invalid key
+  ResolvedKeyEl:=TCSSResolvedIdentifierElement(KeyEl);
+  if ResolvedKeyEl.NumericalID<=CSSIDNone then
+    exit; // unknown attribute
+  // check for validity
+  KeyData:=TCSSAttributeKeyData(KeyEl.CustomData);
+  if KeyData.Invalid then
+    exit; // invalid value
+  TargetResolver:=Target.Resolver;
+  Desc:=TargetResolver.GetAttributeDesc(ResolvedKeyEl.NumericalID);
+  if Desc=nil then
+    exit;
+  Result:=true;
+
+  KeyTxt:=KeyEl.AsFormattedString;
+
   ValueTxt:='';
   for i:=0 to DeclEl.ChildCount-1 do
   begin
@@ -499,55 +570,23 @@ begin
   ValueCaption:=ValueTxt;
   if DeclEl.IsImportant then
     ValueCaption+=' !important';
-  ValueCaption+=';';
 
-  Index:=0;
-  if (DeclEl.KeyCount<>1) then
-  begin
-    // unsupported declaration
-  end else begin
-    KeyEl:=DeclEl.Keys[0];
-    if KeyEl is TCSSResolvedIdentifierElement then
-    begin
-      ResolvedKeyEl:=TCSSResolvedIdentifierElement(KeyEl);
-      if ResolvedKeyEl.NumericalID<=CSSIDNone then
-      begin
-        // unknown attribute
-        writeln('TCSSStyleInspector.AddDeclaration Unknown attribute: ',i,' "',ValueTxt,'"');
-      end else begin
-        // todo: check for validity
-        KeyData:=TCSSAttributeKeyData(KeyEl.CustomData);
-        if KeyData.Invalid then
-        begin
-          // invalid value
-        end else begin
-          // todo: check if overriden
-          // todo: split shorthands
-          writeln('TCSSStyleInspector.AddDeclaration Known: ',i,' "',ValueTxt,'"');
-          UpdateLabel(DeclDiv,Index,DeclKeyLabelClass,KeyTxt);
-          inc(Index);
-          UpdateLabel(DeclDiv,Index,DeclColonLabelClass,':');
-          inc(Index);
-          UpdateLabel(DeclDiv,Index,DeclValueLabelClass,ValueTxt);
-          inc(Index);
-        end;
-      end;
-    end else begin
-      // todo: unknown declaration
-      writeln('TCSSStyleInspector.AddDeclaration Invalid: ',i,' "',DeclEl.AsFormattedString,'"');
-    end;
-  end;
+  writeln('TCSSStyleInspector.UpdateDeclaration Known: ',i,' "',ValueTxt,'"');
 
-  if Index=0 then
-  begin
-    // invalid declaration
-    UpdateLabel(DeclDiv,Index,SkippedClass,KeyTxt+': '+ValueCaption);
-    inc(Index);
-  end;
+  UpdateLabel(DeclDiv,Index,DeclKeyLabelClass,KeyTxt);
+  inc(Index);
+  UpdateLabel(DeclDiv,Index,DeclColonLabelClass,':');
+  inc(Index);
 
-  // delete old elements
-  while DeclDiv.NodeCount>Index do
-    DeclDiv.Nodes[DeclDiv.NodeCount-1].Free;
+
+
+  UpdateLabel(DeclDiv,Index,DeclValueLabelClass,ValueCaption);
+  inc(Index);
+  UpdateLabel(DeclDiv,Index,DeclSemicolonLabelClass,';');
+  inc(Index);
+
+  // todo: split shorthands
+  // todo: check if overriden
 end;
 
 procedure TCSSStyleInspector.UpdateLabel(DeclDiv: TDiv; Index: integer; aClass, aCaption: string);
@@ -621,14 +660,16 @@ begin
   Result:=
      '.'+RulesDivClass+' { color: #fff; font-size: 15px; background-color: #222; padding: 6px; }'+LineEnding
     +'.'+RuleSelectorLabelClass+' { margin-right: 1ch; }'+LineEnding
-    +'.'+RuleBracketLabelClass+' { font-weight: bold; }'+LineEnding
+    //+'.'+RuleBracketLabelClass+' { font-weight: bold; }'+LineEnding
     +'.'+RuleOriginLabelClass+' { margin-left: 5ch; }'+LineEnding
     +'.'+RuleFooterDivClass+' { border-bottom: 1px solid #888; }'+LineEnding
     +'.'+DeclDivClass+' { margin-left: 2ch; }'+LineEnding
     +'.'+DeclKeyLabelClass+' { color: cyan; }'+LineEnding
     +'.'+DeclColonLabelClass+' { margin-right: 1ch; }'+LineEnding
+    +'.'+DeclValueLabelClass+' { color: #d8e; }'+LineEnding
+    //+'.'+DeclSemicolonLabelClass+' { font-weight: bold; }'+LineEnding
     +'.'+SkippedClass+' { color: #aaa; }'+LineEnding
-    +'.'+BoxModellDivClass+' { color: #fff; font-size: 10px; background-color: #222; padding: 6px; }'+LineEnding
+    +'.'+BoxModellDivClass+' { color: #fff; font-size: 10px; background-color: #222; padding: 6px; height: 12em; }'+LineEnding
     ;
 end;