Tuesday, April 16, 2013

Way To Apply Any CSS Property in Webkit




Way To Apply Any CSS Property in Webkit


It's very Important for anyone who wanna add your own CSS properties for a particular html element inside webkit. So to add any CSS property in webkit, following places need to change in webkit/webcore.
Example - Apply Transform CSS3 properties for all elements whichever have CSS properties as -webkit-my-properties



 Inside File Location -     FrameView.cpp,
 Function/API Name -  void FrameView::performPostLayoutTasks()
      
 Add following code snippet after condition failure check/return check in between


 Vector listElem;
 Vector listHeight;
 Vector listWidth;
 Vector listTop;
 Vector listLeft;
 Document *ptrDocument= NULL;
 if(m_frame)
 {
   ptrDocument = m_frame->document(); //main frame document
 }
  TreeScope* ptrTreeScope=ptrDocument;
  if(ptrTreeScope)
  {
    Node* rootNode = ptrTreeScope->rootNode();
    // Traverse all nodes to find out destination elements
    for (Node* ptrNode = rootNode; ptrNode; ptrNode = ptrNode->traverseNextNode(rootNode))
    {
        if (!ptrNode->isElementNode())
            continue;
        Element* element = static_cast(ptrNode);
        char *strTemp = (char*)element->getAttribute(AtomicString("style")).string().utf8().data();
        String strElem(strTemp);
      
        //Filter CSS properties like an example -webkit-my-properties then here we will get all element lists having this css properties
        String strFilter("-webkit-properties");
        unsigned found = strElem.find(strFilter);
        if(element && found != notFound)
        {
              listElem.insert(index,element);
              listHeight.insert(index,element->offsetHeight());
              listWidth.insert(index,element->offsetWidth());
              listTop.insert(index,element->offsetTop());
              listLeft.insert(index,element->offsetLeft());
              index++;           
        }
    }
  }


//Above Instead Vector you can take hash map of Element and user defined staructre having Height, width, Top, Left etc. Declare above Variables globally or make it in singlton class defined and use it as setter/getter

Now we have all elements list having CSS -webkit-my-properties and Time is to apply transform properties like style= "-webkit-transform: translate3d(10px,10px,0) in these filtered element lists

 Inside File Location    YourFile.cpp(Create your file in directory \Source\WebCore\rendering\
 Function/API Name -     void FrameView::performPostLayoutTasks()

for(int i=0 i{
    int xPos = listLeft[i];
    int yPos = listTop[i];
    char* attrName = NULL;
    char* attrValue = NULL;
    String str ;
  
      attrName = "style";
    attrValue = (char*) itoa(xPos); // Numeric to String conversion API call
    String strVal = attrValue;
    str = "-webkit-transform: translate3d(";
    String strVal1 = str + strVal;
    strVal1 = strVal1 + "px," ;
    attrValue =  (char*) itoa(yPos); // Numeric to String conversion API call
    strVal = attrValue;
    strVal1 = strVal1 + strVal;                               
    strVal = "px,0px);" ;  //third argument 0 px in case of 2D transform
    strVal1 = strVal1 +  strVal ;
    ExceptionCode ec = 0 ;
    listElem[i]->setAttribute(AtomicString(attrName), AtomicString(strVal1.utf8().data()), ec);  
}






1 comment:

Anonymous said...

nice practical explaination