Analysis of chromium CSS (1) formation logic of htmlCss by default (chromium39)

Analysis of chromium CSS (1) formation logic of htmlCss by default (chromium39)

After the browser loads the resource, it starts to parse and render the resource. For chromium, it has a default CSS for the webpage, or a default CSS.

I. Creation of default Style Sheets

Which of the following types of CSS are available? Let's take a look at the blink file: cssdefastystylesheets. h

Several member variables are defined in this file:

    OwnPtrWillBeMember
 
   m_defaultStyle;    OwnPtrWillBeMember
  
    m_defaultViewportStyle;    OwnPtrWillBeMember
   
     m_defaultQuirksStyle;    OwnPtrWillBeMember
    
      m_defaultPrintStyle;    OwnPtrWillBeMember
     
       m_defaultViewSourceStyle;    OwnPtrWillBeMember
      
        m_defaultXHTMLMobileProfileStyle; OwnPtrWillBeMember
       
         m_defaultTransitionStyle; RefPtrWillBeMember
        
          m_defaultStyleSheet; RefPtrWillBeMember
         
           m_viewportStyleSheet; RefPtrWillBeMember
          
            m_quirksStyleSheet; RefPtrWillBeMember
           
             m_svgStyleSheet; RefPtrWillBeMember
            
              m_mathmlStyleSheet; RefPtrWillBeMember
             
               m_mediaControlsStyleSheet; RefPtrWillBeMember
              
                m_fullscreenStyleSheet;
              
             
            
           
          
         
        
       
      
     
    
   
  
 

From the name, we can also know what scenarios or functions it is used.

Here, let's take a look at m_defastystylesheet, which is related to the display style of the entire web page.

1. Let's take a look at the initialization of this variable.

In the CSSDefaultStyleSheets constructor, there is a code segment:

    String defaultRules = String(htmlCss, sizeof(htmlCss)) + RenderTheme::theme().extraDefaultStyleSheet();    m_defaultStyleSheet = parseUASheet(defaultRules);    m_defaultStyle->addRulesFromSheet(defaultStyleSheet(), screenEval());

2. Let's analyze the structure of defaultRules in the above Code segment.

It consists of two parts: String (htmlCss, sizeof (htmlCss) and RenderTheme: theme (). extraDefaultStyleSheet ()
3. Let's take a look at the first part: String (htmlCss, sizeof (htmlCss ))
The variable htmlCss is defined in the file: UserAgentStyleSheets. h.

This file is generated during compilation in the out directory.

Let's take a look at the formation of this file.

First look at the file: core_generated.gyp

Code segment:

 {          'action_name': 'UserAgentStyleSheets',          'variables': {            'scripts': [              '../build/scripts/make-file-arrays.py',            ],            'stylesheets': [              'css/html.css',              'css/quirks.css',              'css/view-source.css',              'css/themeChromium.css',              'css/themeChromiumAndroid.css',              'css/themeChromiumLinux.css',              'css/themeChromiumSkia.css',              'css/themeInputMultipleFields.css',              'css/themeMac.css',              'css/themeWin.css',              'css/themeWinQuirks.css',              'css/svg.css',              'css/navigationTransitions.css',              'css/mathml.css',              'css/mediaControls.css',              'css/mediaControlsAndroid.css',              'css/fullscreen.css',              'css/xhtmlmp.css',              'css/viewportAndroid.css',             ],          },          'inputs': [            '<@(scripts)',            '<@(stylesheets)'          ],          'outputs': [            '<(blink_core_output_dir)/UserAgentStyleSheets.h',            '<(blink_core_output_dir)/UserAgentStyleSheetsData.cpp',          ],          'action': [            'python',            '<@(scripts)',            '--namespace',            'blink',            '--out-h=<(blink_core_output_dir)/UserAgentStyleSheets.h',            '--out-cpp=<(blink_core_output_dir)/UserAgentStyleSheetsData.cpp',            '<@(stylesheets)',          ],        },

Through this python code, we know that UserAgentStyleSheetsData. cpp and its header files are formed through this section of the compilation script. The htmlCSS we are looking for is related to the following file: html.css. Other css types are related to other style sheets.

For more information, see html.css.

4. Let's take a look at the second part: RenderTheme: theme (). extraDefaultStyleSheet ()

This method is in the file RenderTheme. cpp:

String RenderTheme::extraDefaultStyleSheet(){    StringBuilder runtimeCSS;    if (RuntimeEnabledFeatures::dialogElementEnabled()) {        runtimeCSS.appendLiteral("dialog:not([open]) { display: none; }");        runtimeCSS.appendLiteral("dialog { position: absolute; left: 0; right: 0; width: -webkit-fit-content; height: -webkit-fit-content; margin: auto; border: solid; padding: 1em; background: white; color: black;}");        runtimeCSS.appendLiteral("dialog::backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.1); }");    }    if (RuntimeEnabledFeatures::contextMenuEnabled()) {        runtimeCSS.appendLiteral("menu[type=\"popup\" i] { display: none; }");    }    return runtimeCSS.toString();}

This default style table is initialized only once. This section describes its composition. If you are interested, you can continue to study it. By changing the default style sheet, you can do many things.

Next, let's take a look at the creation logic of this default style table.

Ii. Creation logic of the default style sheet

Let's start with the DocumentLoader: finishedLoading method.

The method DocumentLoader: finishedLoading will call the method in the same file: DocumentLoader: endWriting

The call stack starting with this method is as follows:

W/WebKit  ( 8157): DocumentLoader::endWritingW/WebKit  ( 8157): DocumentWriter::end() W/WebKit  ( 8157): HTMLDocumentParser::finish()W/WebKit  ( 8157): HTMLDocumentParser::attemptToEnd()W/WebKit  ( 8157): HTMLDocumentParser::prepareToStopParsing()

The Calling logic starting from the prepareToStopParsing method is as follows:

W/WebKit  ( 8157): HTMLDocumentParser::prepareToStopParsing()  W/WebKit  ( 8157): HTMLDocumentParser::attemptToRunDeferredScriptsAndEnd()W/WebKit  ( 8157): HTMLDocumentParser::end()W/WebKit  ( 8157): HTMLTreeBuilder::finished()W/WebKit  ( 8157): HTMLConstructionSite::finishedParsing()W/WebKit  ( 8157): Document::finishedParsing()W/WebKit  ( 8157): FrameLoader::finishedParsing() W/WebKit  ( 8157): Document::explicitClose()W/WebKit  ( 8157): FrameLoader::checkCompleted()W/WebKit  ( 8157): FrameLoader::completed()W/WebKit  ( 8157): FrameView::maintainScrollPositionAtAnchor W/WebKit  ( 8157): FrameLoader::checkLoadComplete()W/WebKit  ( 8157): FrameLoader::checkLoadCompleteForThisFrame()W/WebKit  ( 8157): updateRenderTreeIfNeeded() W/WebKit  ( 8157): Document::updateRenderTreeW/WebKit  ( 8157): Document::updateStyleW/WebKit  ( 8157): Document::ensureStyleResolver()W/WebKit  ( 8157): StyleResolver& ensureResolver()W/WebKit  ( 8157): StyleEngine::createResolver()W/WebKit  ( 8157): StyleEngine::appendActiveAuthorStyleSheets()W/WebKit  ( 8157): StyleResolver::finishAppendAuthorStyleSheets()W/WebKit  ( 8157): StyleResolver::collectFeatures()W/WebKit  ( 8157): CSSDefaultStyleSheets::instance()W/WebKit  ( 8157): CSSDefaultStyleSheets::CSSDefaultStyleSheets()