                 @div class: 'container package-container', outlet: 'packageList'
             @div class: 'section packages' , =>
               @div class: 'section-container', =>
-                @h1 class: 'section-heading icon icon-star', 'Featured Packages'
+                @h1 class: 'section-heading icon icon-star', 'Featured Packages', style: 'margin-bottom:10px;'
+                @div class: 'container package-container', outlet: 'popularList'
 
 
     initialize: (options = {})->


    #根据关键字搜索包
    searchPackage: (keyword, done)->

      return done @serverPackages, keyword if @serverPackages

      return if @isFetching
      @isFetching = yes
      @fetchAllPackageFormServer().then (result)=>
        console.log "fetch all packages info finished,total:#{result.length}"
        @isFetching = no
        @serverPackages = result
        done @serverPackages, keyword
      .catch (error)=>
        @showTip "Sorry, can not connect to chameleon puzzle's server temporary."

    #从服务器拉取所有安装包信息
    fetchAllPackageFormServer:() ->
        Q.promise (resolve, reject, notify) =>
          r = request.get "#{PuzzleServer}/api/packages?access_token=#{PuzzleAccessToken}&sequence=1", (err, res, body) =>
            reject err if err
            data = JSON.parse(body)
            resolve data.packages

      @editor.on 'keyup', => @onSearchEnter()
      @installPathEditor.on 'click', => @choosePath()
      @installPathEditor.setText options.path if options.path

      @fetchAllPackageFormServer().then (result)=>
        console.log "fetch all packages info finished,total:#{result.length}"
        @serverPackages = result
        @showPopularPackage result
      .catch (error)=>
        @showTip "Sorry, can not connect to chameleon puzzle's server temporary."

    attach: ->
      aPane = atom.workspaceView.getActivePane()
